Your CSS code has multiple issues that should be resolved.
- There is an excessive use of absolute/relative positioning without actual necessity.
- Vendor-specific prefixes are missing where required.
- An extra closing bracket is present at the end of your CSS code.
- You have a duplicate declaration, which although harmless, can be bothersome.
By implementing the corrected CSS, you will notice that the clear:both; property suddenly starts functioning. Previously, it was not working due to the absolute positioning of the text section. Additionally, it is advisable to enclose the text section in a single div to ensure the <footer> always appears below, even without explicit clearing.
Addressing the issue in your footer where the li elements are set to display:inline; but contain div elements, causing them to behave like block elements. As a quick fix, I modified the footer li selector to footer * at the end of the CSS. However, it is advisable to specify precisely which elements should be displayed as inline.
Here is a Fiddle showcasing the implemented changes.
Optimized CSS (+Vendor prefixes, -typographical errors, -redundant declarations)
#background-image
{
background: url(http://www.arielbalter.com/BuzzJoy/img/green_and_roasted_half_and_half.jpg);
width: 100%;
top: 0;
left: 0;
opacity: 0.6;
position: fixed;
background-repeat: repeat-y;
padding: 0;
margin: 0;
}
header
{
width: 100%;
padding: 0;
margin: 0;
}
#buzz-joy-logo
{
width: 100%;
height: auto;
top: 0%;
position: relative;
z-index: 2;
display: block;
padding: 0;
margin: 0 auto 0 auto;
}
nav
{
padding: 0;
margin: 0 0 0 15%;
float: left;
}
nav li
{
display: inline;
}
.nav-link
{
position: relative;
width: 10em;
height: 5.3em;
background-image: url(http://www.arielbalter.com/BuzzJoy/img/CoffeeCupNoSteam.png);
display: block;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
text-align: center;
margin: 0 0 1em 0;
padding: 0;
text-decoration: none;
}
.nav-link:hover
{
color: DarkGoldenRod;
}
.nav-cup-image
{
height: 100px;
width: auto;
padding: 0;
margin: 0;
}
.nav-text
{
position: relative;
color: Yellow;
font-size: 1.5em;
text-align: center;
font-family: "GillSansUltraBoldCondensedRegular", sans-serif;
font-weight: 100;
margin: 0% 13% 0 0;
padding: 0.6em 0em 10em 0;
}
.nav-text:hover
{
color: DarkGoldenRod;
}
#nav-list
{
list-style-type: none;
padding: 0;
}
.text-section
{
width: 40%;
background-color: GoldenRod;
background-color: rgb(188, 121, 0);
background-color: #BC7900;
opacity: 0.9;
padding: 0 2em 0 1em;
margin: 1% 0 0 0;
float: left;
}
.text-section h1
{
font-family: "GillSansUltraBold", sans-serif;
font-size: 2em;
margin: 0 0 0.2em 0;
padding: 0;
}
.text-section h2
{
font-family: "OpenSansExtraBold", sans-serif;
font-size: 1.8em;
margin: 0.4em 0 0em 0;
padding: 0;
}
.text-section p
{
font-family: "OpenSans", sans-serif;
font-size: 1em;
padding: 0;
margin: 0 0 0.3em 0;
}
footer
{
clear: both;
}
footer *
{
display: inline;
}