PDA

View Full Version : Can't get footer to work, stuck mid-page.



ashesinyourhair
Apr 21st, 2010, 06:10 AM
I'm working on a site for a friend of mine and I can't for the life of me get the footer to move out of the middle of the page and to the bottom. I've looked at several threads on this and tried many solutions, but I can't get it to work. I've attached the CSS coding and am requesting that someone please take a look and help me out. Thanks in advance!


/* CSS Document */

html {
height:100%;


}

body{
margin:0; padding:0; background:url(images/bg.jpg) repeat-x 0 0 #000000;
color:#FFFFFF;
height:100%;
padding-bottom:125px;


}

div, p, h1, h2, h3, ul, li, a, form, input, label, img{
margin:0; padding:0;
}

.spacer{
line-height:0; font-size:0; clear:both;
}



/*------------------------------------------Header Start----------------------------------*/

#container{
margin:0 auto; padding:0 0 54px 0;
height:100%;
position:relative;
min-height:100%;
overflow: inherit; padding-bottom:125px;
}

* html #container{
height:100%;
}

#header{
position: absolute;left:280px;top:0px;
background:url(images/header_bg.png) no-repeat 0 0 #000000; color:#FFFFFF;
width:778px; height:328px; margin:0 0 15px 0; float:left;
}

#header ul.headerTop{
margin:0;
padding:0;
list-style:none;
position:absolute;
left:149px;
top:5px;
width: 625px;
}
#header ul.headerTop li{
background:url() no-repeat right top #370000;
font:bold 10px/20px "Trebuchet MS", Arial, Helvetica, sans-serif; text-transform:uppercase;
color:#FFFFFF; text-align:center; float:left;
}
#header ul.headerTop li a{
font:bold 10px/20px "Trebuchet MS", Arial, Helvetica, sans-serif; background-color:#370000;
color:#FFFFFF; text-decoration:none; display:block; padding:0 17px; margin:0 1px 0 0;
}
#header ul.headerTop li a:hover{
background:url() no-repeat 3px 0 #370000;
color:#FFFFFF;
}
#header ul.headerTop li a.home{
background:url() no-repeat 3px 0 #370000;
font:bold 10px/20px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#FFFFFF; text-decoration:none; display:block; padding:0 17px; margin:0 1px 0 0;
}
#header ul.headerTop li.contact{
background:none; background-color:#370000;
font:bold 10px/20px "Trebuchet MS", Arial, Helvetica, sans-serif; text-transform:uppercase;
color:#FFFFFF; text-align:center; float:left;
}

#header img{
position:absolute;
left:313px;
top:82px;
background:url(images/logo.gif) no-repeat 0 0 #000000;
color:#FFFFFF;
}

#header h1{
position:absolute;
left:354px;
top:189px;
background:url() no-repeat 0 0 #000000;
;
font:bold 20px/22px Arial, Helvetica, sans-serif;
color:#333333;
text-indent:-1000px;
width:383px;
height:26px;
background-image: url(images/slogan.png);
}

#header a.login{
position:absolute; right:63px; top:5px;
background:url(images/login_bg.gif) no-repeat 0 0 #000000;
color:#333333; text-indent:-1000px; width:86px; height:72px;
}

#header form#search{
position:absolute; left:313px; top:32px;
width:443px; height:24px; padding:1px 0 1px 22px; margin:0;
background-color:#c00000; color:#000000;
}
#header form#search label{
background:url(images/search_icon.gif) no-repeat 0 0 #c00000;
font:normal 18px/24px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#FFFFFF; padding:0 5px 0 22px; margin:0; float:left;
}
#header form#search input{
background-color:#FFFFFF; border:#A90158 solid 1px;
width:140px; height:20px;
font:normal 14px/16px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#000000; margin:1px 0; padding:0 4px; float:left;
}

#header ul.headerBottom{
position:absolute;
left:405px;
top:251px;
margin:0;
padding:0;
list-style:none;
width: 366px;
}
#header ul.headerBottom li{
float:left; margin:0 14px 0 0;
}
#header ul.headerBottom li.prowrestling a{
background:url(images/wrestling.png) no-repeat 0 0 ;
font:bold 14px/16px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#FFFFFF; text-indent:-1000px; width:72px; height:62px;
text-decoration:none; display:block;
}
#header ul.headerBottom li.popculture a{
background:url(images/popculture.png) no-repeat 0 0;
font:bold 14px/16px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#FFFFFF; text-indent:-1000px; width:72px; height:62px;
text-decoration:none; display:block;
}
#header ul.headerBottom li.stupidity a{
background:url(images/stupidity.png) no-repeat 0 0;
font:bold 14px/16px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#FFFFFF; text-indent:-1000px; width:72px; height:62px;
text-decoration:none; display:block;
}
#header ul.headerBottom li.potd a{
background:url(images/photoshops.png) no-repeat 0 0;
font:bold 14px/16px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#FFFFFF; text-indent:-1000px; width:72px; height:62px;
text-decoration:none; display:block;
}


/*------------------------------------------Header End----------------------------------*/

/*------------------------------------------Left Start----------------------------------*/

#left{
position:absolute;left:23px;top:0px;
width:239px; padding:9px 0 0 0px; margin:0 23px 0 0;
float:left;
padding-bottom:7.8em;
}
#left div.leftForm{
width:239px; float:left;
}
#left div.topCurve{
background:url(images/contact_top_curve.gif) 0 0 #000000; color:#FFFFFF;
width:239px; height:2px; display:block; line-height:0; font-size:0;
}
#left div.bottomCurve{
background:url(images/contact_bottom_curve.gif) 0 0 #000000; color:#FFFFFF;
width:239px; height:2px; display:block; line-height:0; font-size:0;
}

#left form#contactForm{
background-color:#1F1F1F; color:#000000;
border-left:#333333 solid 1px; border-right:#333333 solid 1px;
padding:20px 21px 31px 21px; width:195px;
}
#left form#contactForm h2{
font:normal 24px/26px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#FFFFFF; background-color:#1F1F1F; float:left;
}
#left form#contactForm label{
font:bold 10px/20px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#FFFFFF; background-color:#1F1F1F; text-transform:uppercase;
}
#left form#contactForm input{
background-color:#FFFFFF; border:#959595 solid 1px;
width:183px; height:20px;
font:bold 14px/16px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#000000; padding:0 4px; float:left;
}
#left form#contactForm textarea{
background-color:#FFFFFF; border:#959595 solid 1px;
width:190px; height:81px;
font:bold 14px/16px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#000000; float:left;
}

#left form#contactForm input.submit{
position:absolute; left:209px; top:347px;
border:none; width:58px; height:15px;
background-color:#1F1F1F; color:#000000;
}


/*------------------------------------------Left End----------------------------------*/

/*------------------------------------------Right Start----------------------------------*/

#right{
position:absolute;left:280px;top:343px;
float:left; width:776px;
padding-bottom:7.8em;
}

#right h2{
background:url(images/contact_line.gif) repeat-x 0 19px #000000; color:#FFFFFF;
width:776px; float:left;
}
#right h2 span{
font:normal 24px/26px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#e70000; background-color:#000000; padding:0 3px 0 0;
}
#right p.lightGrey{
color:#B2B2B2;
background-color:#000000;
padding:6px 0 26px 0;
float:left;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
line-height: 16px;
font-weight: normal;
font-variant: normal;
}

#right p.lightGrey span{
font:bold 12px/16px "Trebuchet MS",Arial, Helvetica, sans-serif;
color:#FF0084; background-color:#000000;
}

#right p.lightGrey span a{
font:bold 12px/16px Arial, Helvetica, sans-serif;
color:#c00000; text-decoration:none; background-color:#000000;
}
#right p.lightGrey span a:hover{
background-color:#000000;
color:#b2b2b2;
font-size: 12px;
}

#right p.Featured{
font:bold 12px/16px "Trebuchet MS",Arial, Helvetica, sans-serif;
color:#B2B2B2;
background-color:#000000;
}

#right p.Featured a{
font:bold 18px Arial, Helvetica, sans-serif;
color:#c00000;
text-decoration:none;
background-color:#000000;
}
#right p.Featured a:hover{
background-color:#000000; color:#b2b2b2;
}

#right p.lightGrey a{
font:bold 12px/16px Arial, Helvetica, sans-serif;
color:#c00000;
text-decoration:none;
background-color:#000000;
font-size: 12px;
}
#right p.lightGrey a:hover{
background-color:#000000;
color:#b2b2b2;
font-size: 12px;
}

#right ul{
margin:0; padding:8px 0 0 0; list-style:none;
}

#right ul li.no1{
background:url(images/company_li_1.gif) no-repeat 0 0 #000000;
font:normal 16px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#b2b2b2; text-transform:uppercase; padding:0 0 14px 35px;
}
#right ul li.no2{
background:url(images/company_li_2.gif) no-repeat 0 0 #000000;
font:normal 16px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#b2b2b2; text-transform:uppercase; padding:0 0 14px 35px;
}
#right ul li.no3{
background:url(images/company_li_3.gif) no-repeat 0 0 #000000;
font:normal 16px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#b2b2b2; text-transform:uppercase; padding:0 0 14px 35px;
}
#right ul li.no4{
background:url(images/company_li_4.gif) no-repeat 0 0 #000000;
font:normal 16px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#b2b2b2; text-transform:uppercase; padding:0 0 14px 35px;
}
#right ul li span{
font:normal 12px/16px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#B2B2B2; text-transform:none; background-color:#000000;
}
#right ul li span a{
font:bold 12px/16px Arial, Helvetica, sans-serif;
color:#c00000; text-decoration:none; background-color:#000000;
}
#right ul li span a:hover{
background-color:#000000; color:#b2b2b2;
}


/*------------------------------------------Right End----------------------------------*/

/*------------------------------------------Footer Start----------------------------------*/

#footerOutside{
position:relative;
bottom:0px;
background-color:#121212; color:#FFFFFF;
margin-top:-7.8em auto 0 auto;
height:141px;
}

#footer{
margin:0 auto; width:681px;
background:url(images/footer_logo.png) no-repeat 0 0 #121212;
color:#FFFFFF; height:125px;
padding:16px 46px 0 51px;
position:relative;
bottom:0px;
margin-top:-7.8em auto 0 auto;
clear:both;
}

#footer ul.nav{
margin:0; padding:0; list-style:none;
}

#footer ul.nav li{
font:bold 11px/13px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#FFFFFF; background-color:#121212; float:right;
display:block;
}

#footer ul.nav li a{
font:bold 11px/13px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#FFFFFF; background-color:#121212; text-decoration:none; padding:0 8px;
}
#footer ul.nav li a:hover{
background-color:#292929; color:#FFFFFF;
}

#footer p{
width:454px; margin:5px 5px 8px 0; text-align:right;
height:16px; background-color:#1C1C1C; color:#121212;
float:right;
}
#footer p span{
font:normal 12px/16px Arial, Helvetica, sans-serif;
color:#b2b2b2; background-color:#1C1C1C;
}

#footer ul.navlink{
margin:0; padding:0; list-style:none;
}

#footer ul.navlink li{
font:bold 12px/16px Arial, Helvetica, sans-serif;
color:#FFFFFF; background-color:#121212;
float:right;
}

#footer ul.navlink li a.xhtml{
background:url(images/xhtml_icon.gif) no-repeat 42px 2px #121212;
font:bold 12px/16px Arial, Helvetica, sans-serif;
color:#FFFFFF; text-decoration:none; width:40px;
padding:0 15px 0 0; display:block; margin:0 8px 0 0;
}
#footer ul.navlink li a.xhtml:hover{
background:url(images/xhtml_icon.gif) no-repeat 42px 0px #121212;
color:#FFFFFF;
}

#footer ul.navlink li a.css{
background:url(images/xhtml_icon.gif) no-repeat 27px 2px #121212;
font:bold 12px/16px Arial, Helvetica, sans-serif;
color:#FFFFFF; text-decoration:none; width:38px;
padding:0 7px 0 0; display:block;
}
#footer ul.navlink li a.css:hover{
background:url(images/xhtml_icon.gif) no-repeat 27px 0px #121212;
color:#FFFFFF;
}

#footer ul.design{
margin:0; padding:6px 6px 0 0; list-style:none;
}

#footer ul.design li{
font:normal 12px/16px Arial, Helvetica, sans-serif;
color:#FFFFFF; background-color:#121212;
float:right;
}
#footer ul.design li a{
font:bold 12px/16px Arial, Helvetica, sans-serif;
color:#b2b2b2; background-color:#121212; text-decoration:none;
text-transform:uppercase;
}
#footer ul.design li a:hover{
background-color:#292929; color:#c00000;
}

/*------------------------------------------Footer End----------------------------------*/

NBK*Twitch
Apr 21st, 2010, 06:14 AM
Well when putting your code in the validator I get these errors -

Value Error : margin-top Too many values or values are not recognized : -7.8em auto 0 auto -7.8em auto 0 auto

Value Error : margin-top Too many values or values are not recognized : -7.8em auto 0 auto -7.8em auto 0 auto

For footer and footer outside,

ashesinyourhair
Apr 21st, 2010, 06:51 AM
Got rid of auto 0 auto in both instances, but it did nothing to the footer itself.

Excavator
Apr 21st, 2010, 09:36 AM
Hello ashesinyourhair,
The CSS alone is not enough information. Post your markup too.
A link to the site would be even better.

ashesinyourhair
Apr 21st, 2010, 10:41 AM
Here's the HTML. Thanks again!


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>SEANCARLESS.COM - RASSLIN', REVIEWS, &amp; RIDICULOUSNESS!</title>
<link href="columnstyle.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
<div id="header">
<h1>Rasslin', Reviews, and Ridiculousness!</h1>
<ul class="headerTop">
<li><a href="http://www.seancarless.com" class="home">Home</a></li>
<li><a href="http://www.seancarless.com/wrestling.html">Pro Wrestling</a></li>
<li><a href="http://www.seancarless.com/popculture.html">Pop Culture &amp; Reviews</a></li>
<li><a href="http://www.seancarless.com/stupidity.html">Stupidity</a></li>
<li><a href="http://www.seancarless.com/psotd.html">POTD</a></li>
<li><a href="http://www.seancarless.com/about.html">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<ul class="headerBottom">
<li class="prowrestling"><a href="http://www.seancarless.com/wrestling.html" title="Pro Wrestling">Pro Wrestling</a></li>
<li class="popculture"><a href="http://www.seancarless.com/popculture.html" title="Pop Culture & Reviews">Pop Culture</a></li>
<li class="stupidity"><a href="http://www.seancarless.com/stupidity.html" title="Stupidity">Stupidity</a></li>
<li class="potd"><a href="http://www.seancarless.com/psotd.html" title="POTD">POTD</a></li>


</ul>
<a href="index.html"><img src="images/logo.png" alt="" border="0" /></a> </div>
<div id="left">
<div class="leftForm">
<div class="topCurve"></div>
<form id="contactForm" name="form2" method="post" action="">
<center>
<p><a href="http://www.twitter.com/theseancarless" target="_blank"><img src="images/twitter.png" width="200" height="66" border="0" /></a></p>
<p>&nbsp;</p>
<p><img src="http://www.thewrestlingfan.com/sitebuildercontent/sitebuilderpictures/twf.gif" width="193" height="400" /></p>
<p>&nbsp;</p>
<p>
<!-- Begin ShoutMix - http://www.shoutmix.com -->
<iframe title="scarless" src="http://www2.shoutmix.com/?scarless" width="190" height="300" frameborder="0" > <a href="http://www2.shoutmix.com/?scarless">View shoutbox</a> </iframe>
</p>
<p>&nbsp;</p>
<p><img src="http://img403.imageshack.us/img403/1747/hatebanner.gif" width="160" height="600" /></p>
<p>&nbsp;</p>
<p><img src="http://img167.imageshack.us/img167/6889/wcbannerga5.gif" width="193" height="273" /></p>
<p>&nbsp;</p>
<p><img src="http://img518.imageshack.us/img518/2392/roixk5.jpg" width="193" height="300" /></p>
<p>&nbsp;</p>
<p><img src="http://www.thewrestlingfan.com/sitebuildercontent/sitebuilderpictures/seanad7.jpg" width="193" height="400" /></p>
<p>&nbsp;</p>
<p><img src="http://www.thewrestlingfan.com/sitebuildercontent/sitebuilderpictures/seanad6.jpg" width="193" height="421" /></p>
<p>&nbsp;</p>
<p><img src="http://www.thewrestlingfan.com/sitebuildercontent/sitebuilderpictures/seanad8.jpg" width="193" height="400" /></p>
<p>&nbsp;</p>
<p><br class="spacer" />
<br class="spacer" />
</p>
</center>
</form>
<div class="bottomCurve"></div>
</div>
<br class="spacer" />
</div>
<div id="right">
<h2><span>Welcome to SeanCarless.com!</span></h2><br class="spacer" />
<p class="lightGrey">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis interdum nibh orci, vitae hendrerit turpis. Cras eget leo ut velit ullamcorper ullamcorper nec quis urna. Nam congue faucibus lectus eu blandit. Morbi orci felis, varius quis vehicula in, tincidunt ac ligula. Vestibulum augue mauris, aliquet in tempor vel, varius eget erat. Vivamus ut nunc non nisl iaculis faucibus non sit amet nulla. Integer auctor leo ut ligula ultrices iaculis. Morbi et enim urna, sit amet sollicitudin lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas posuere blandit massa, et sagittis urna vestibulum cursus.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In tellus turpis, convallis sit amet lobortis ac, sollicitudin eu lectus. Donec turpis eros, porta et placerat et, blandit eu nibh. Curabitur quis diam elit, ullamcorper mollis nibh. Proin lacus quam, semper quis facilisis non, convallis non leo. Suspendisse placerat rutrum lectus, a mattis dui malesuada a. Donec non auctor mi. Nam posuere tellus quis erat lacinia vitae tempor libero dapibus. Quisque mauris nulla, vestibulum quis pulvinar sit amet, fringilla a ligula. Nulla facilisi. Donec id ipsum ipsum. Suspendisse id velit et ipsum luctus dignissim. Aenean dictum, enim sodales vestibulum ornare, tortor velit malesuada erat, eget laoreet urna quam sed enim. </p>

<br class="spacer" />
<h2><span>Featured Content</span></h2><br class="spacer" />
<p class="Featured"><CENTER>
<p><strong><a href="http://www.seancarless.com/wrestlemania26.html"><img src="images/wm26.png" width="475" height="207" border="0" /></a></strong></p>
<p>&nbsp;</p>
<p class="Featured">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis interdum nibh orci, vitae hendrerit turpis. Cras eget leo ut velit ullamcorper ullamcorper nec quis urna. Nam congue faucibus lectus eu blandit. Morbi orci felis, varius quis vehicula in, tincidunt ac ligula. Vestibulum augue mauris, aliquet in tempor vel, varius eget erat. Vivamus ut nunc non nisl iaculis faucibus non sit amet nulla. Integer auctor leo ut ligula ultrices iaculis. Morbi et enim urna, sit amet sollicitudin lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas posuere blandit massa, et sagittis urna vestibulum cursus.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In tellus turpis, convallis sit amet lobortis ac, sollicitudin eu lectus. Donec turpis eros, porta et placerat et, blandit eu nibh. Curabitur quis diam elit, ullamcorper mollis nibh. Proin lacus quam, semper quis facilisis non, convallis non leo. Suspendisse placerat rutrum lectus, a mattis dui malesuada a. Donec non auctor mi. Nam posuere tellus quis erat lacinia vitae tempor libero dapibus. Quisque mauris nulla, vestibulum quis pulvinar sit amet, fringilla a ligula. Nulla facilisi. Donec id ipsum ipsum. Suspendisse id velit et ipsum luctus dignissim. Aenean dictum, enim sodales vestibulum ornare, tortor velit malesuada erat, eget laoreet urna quam sed enim. </p><BR />
<br class="spacer" />
</CENTER>

<h2><span>Content</span></h2><br class="spacer" />
<ul>
<li class="no1">PRO WRESTLING!<br />
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis interdum nibh orci, vitae hendrerit turpis. Cras eget leo ut velit ullamcorper ullamcorper nec quis urna.........................<a href="http://www.seancarless.com/wrestling.html" title="more">more</a></span></li>
<li class="no2">POP CULTURE &amp; REVIEWS!<br /><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis interdum nibh orci, vitae hendrerit turpis. Cras eget leo ut velit ullamcorper ullamcorper nec quis urna.........................<a href="http://www.seancarless.com/popculture.html" title="more">more</a></span></li>
<li class="no3">STUPIDITY!<br /><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis interdum nibh orci, vitae hendrerit turpis. Cras eget leo ut velit ullamcorper ullamcorper nec quis urna.........................<a href="http://www.seancarless.com/stupidity.html" title="more">more</a></span></li>
<li class="no4">PHOTOSHOPS OF THE DAY!<BR /><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis interdum nibh orci, vitae hendrerit turpis. Cras eget leo ut velit ullamcorper ullamcorper nec quis urna.........................<a href="http://www.seancarless.com/psotd.html" title="more">more</a></span></li>
</ul>
</div><br class="spacer"/>

</div>

</p>


<div id="footerOutside">
<div id="footer">
<ul class="nav">
<li><a href="#">Contact</a></li>
<li><a href="http://www.seancarless.com/about.html">About</a>|</li>
<li><a href="http://www.seancarless.com/psotd.html">POTD</a>|</li>
<li><a href="http://www.seancarless.com/stupidity.html">Stupidity</a>|</li>
<li><a href="http://www.seancarless.com/popculture.html">Pop Culture &amp; Reviews</a>|</li>
<li><a href="http://www.seancarless.com/wrestling.html">Pro Wrestling</a>|</li>
<li><a href="http://www.seancarless.com">Home</a>|</li>
</ul><br class="spacer" />
<p><span>&copy; Copyright 2008 - 2010 Sean Carless. All Rights Reserved.</span></p><br class="spacer" />
<br class="spacer" />
<ul class="design">
<li>designed by <a href="http://www.thewrestlingfan.com/deadfacewalking.html" target="_blank"> Catherine P.</a> </li>
</ul>
</div>
</div>
</body>
</html>

Excavator
Apr 21st, 2010, 05:49 PM
That is quite the mess of code to dig through.
Your best bet is to validate it. See the links about validation in my sig below.

After you get it validated, it's also an attempt at a full-height layout. Seems there is enough content that you don't need to worry about that, unless there is another page without enough content to push the footer down?
I would recomend stripping the full-height stuff and just let the document flow naturally.
Have a close look at how floats are being cleared.

ashesinyourhair
Apr 22nd, 2010, 05:31 AM
I finally managed to move the footer to the bottom of the page, but long text overlaps it instead of pushes it down, and it makes a gap on the very bottom. I've Googled what seems to be many well-known solutions to this, but none seem to work. Anyone care to take a look at my updated CSS coding? I did validate it, and it says there are no errors, but I'm not so sure.


html, body, #wrap {height: 100%;}

body > #wrap {height: auto; min-height: 100%;}

body{
margin:0; padding:0; background:url(images/bg.jpg) repeat-x 0 0 #000000;
color:#FFFFFF;
}

div, p, h1, h2, h3, ul, li, a, form, input, label, img{
margin:0; padding:0;
}

.spacer{
line-height:0; font-size:0; clear:both;
}



#header {position: absolute;left:357px;top:0px;
background:url(images/header_bg.png) no-repeat 0 0 #000000; color:#FFFFFF;
width:778px; height:328px; margin:0 0 15px 0; float:left;
}

#header ul.headerTop{
margin:0;
padding:0;
list-style:none;
position:absolute;
left:149px;
top:5px;
width: 625px;
}
#header ul.headerTop li{
background:url() no-repeat right top #370000;
font:bold 10px/20px "Trebuchet MS", Arial, Helvetica, sans-serif; text-transform:uppercase;
color:#FFFFFF; text-align:center; float:left;
}
#header ul.headerTop li a{
font:bold 10px/20px "Trebuchet MS", Arial, Helvetica, sans-serif; background-color:#370000;
color:#FFFFFF; text-decoration:none; display:block; padding:0 17px; margin:0 1px 0 0;
}
#header ul.headerTop li a:hover{
background:url() no-repeat 3px 0 #370000;
color:#FFFFFF;
}
#header ul.headerTop li a.home{
background:url() no-repeat 3px 0 #370000;
font:bold 10px/20px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#FFFFFF; text-decoration:none; display:block; padding:0 17px; margin:0 1px 0 0;
}
#header ul.headerTop li.contact{
background:none; background-color:#370000;
font:bold 10px/20px "Trebuchet MS", Arial, Helvetica, sans-serif; text-transform:uppercase;
color:#FFFFFF; text-align:center; float:left;
}

#header img{
position:absolute;
left:313px;
top:82px;
background:url(images/logo.gif) no-repeat 0 0 #000000;
color:#FFFFFF;
}

#header h1{
position:absolute;
left:354px;
top:189px;
background:url() no-repeat 0 0 #000000;
;
font:bold 20px/22px Arial, Helvetica, sans-serif;
color:#333333;
text-indent:-2000px;
width:383px;
height:26px;
background-image: url(images/slogan.png);
}

#header a.login{
position:absolute; right:63px; top:5px;
background:url(images/login_bg.gif) no-repeat 0 0 #000000;
color:#333333; text-indent:-1000px; width:86px; height:72px;
}

#header form#search{
position:absolute; left:313px; top:32px;
width:443px; height:24px; padding:1px 0 1px 22px; margin:0;
background-color:#c00000; color:#000000;
}
#header form#search label{
background:url(images/search_icon.gif) no-repeat 0 0 #c00000;
font:normal 18px/24px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#FFFFFF; padding:0 5px 0 22px; margin:0; float:left;
}
#header form#search input{
background-color:#FFFFFF; border:#A90158 solid 1px;
width:140px; height:20px;
font:normal 14px/16px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#000000; margin:1px 0; padding:0 4px; float:left;
}

#header ul.headerBottom{
position:absolute;
left:405px;
top:251px;
margin:0;
padding:0;
list-style:none;
width: 366px;
}
#header ul.headerBottom li{
float:left; margin:0 14px 0 0;
}
#header ul.headerBottom li.prowrestling a{
background:url(images/wrestling.png) no-repeat 0 0 ;
font:bold 14px/16px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#FFFFFF; text-indent:-2000px; width:72px; height:62px;
text-decoration:none; display:block;
}
#header ul.headerBottom li.popculture a{
background:url(images/popculture.png) no-repeat 0 0;
font:bold 14px/16px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#FFFFFF; text-indent:-2000px; width:72px; height:62px;
text-decoration:none; display:block;
}
#header ul.headerBottom li.stupidity a{
background:url(images/stupidity.png) no-repeat 0 0;
font:bold 14px/16px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#FFFFFF; text-indent:-2000px; width:72px; height:62px;
text-decoration:none; display:block;
}
#header ul.headerBottom li.potd a{
background:url(images/photoshops.png) no-repeat 0 0;
font:bold 14px/16px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#FFFFFF; text-indent:-2000px; width:72px; height:62px;
text-decoration:none; display:block;
}


#main {padding-bottom: 107px;}

/*------------------------------------------Left Start----------------------------------*/

#left{
position:relative;left:100px;top:0px;
width:239px; padding:9px 0 0 0px; margin:0 23px 0 0;
float:left;
padding-bottom:0;
}
#left div.leftForm{
width:239px; float:left;
}
#left div.topCurve{
background:url(images/contact_top_curve.gif) 0 0 #000000; color:#FFFFFF;
width:239px; height:2px; display:block; line-height:0; font-size:0;
}
#left div.bottomCurve{
background:url(images/contact_bottom_curve.gif) 0 0 #000000; color:#FFFFFF;
width:239px; height:2px; display:block; line-height:0; font-size:0;
}

#left form#contactForm{
background-color:#1F1F1F; color:#000000;
border-left:#333333 solid 1px; border-right:#333333 solid 1px;
padding:20px 21px 31px 21px; width:195px;
}


/*------------------------------------------Left End----------------------------------*/

/*------------------------------------------Right Start----------------------------------*/

#right{
position:relative;left:100px;top:343px;
float:left; width:776px;
padding-bottom:0;
}



#right h2{
background:url(images/contact_line.gif) repeat-x 0 19px #000000; color:#FFFFFF;
width:776px; float:left;
}
#right h2 span{
font:normal 24px/26px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#e70000; background-color:#000000; padding:0 3px 0 0;
}
#right p.lightGrey{
color:#B2B2B2;
background-color:#000000;
padding:6px 0 26px 0;
float:left;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
line-height: 16px;
font-weight: normal;
font-variant: normal;
}

#right p.lightGrey span{
font:bold 12px/16px "Trebuchet MS",Arial, Helvetica, sans-serif;
color:#FF0084; background-color:#000000;
}

#right p.lightGrey span a{
font:bold 12px/16px Arial, Helvetica, sans-serif;
color:#c00000; text-decoration:none; background-color:#000000;
}
#right p.lightGrey span a:hover{
background-color:#000000;
color:#b2b2b2;
font-size: 12px;
}

#right p.Featured{
font:bold 12px/16px "Trebuchet MS",Arial, Helvetica, sans-serif;
color:#B2B2B2;
background-color:#000000;
}

#right p.Featured a{
font:bold 18px Arial, Helvetica, sans-serif;
color:#c00000;
text-decoration:none;
background-color:#000000;
}
#right p.Featured a:hover{
background-color:#000000; color:#b2b2b2;
}

#right p.lightGrey a{
font:bold 12px/16px Arial, Helvetica, sans-serif;
color:#c00000;
text-decoration:none;
background-color:#000000;
font-size: 12px;
}
#right p.lightGrey a:hover{
background-color:#000000;
color:#b2b2b2;
font-size: 12px;
}

#right ul{
margin:0; padding:8px 0 0 0; list-style:none;
}

#right ul li.no1{
background:url(images/company_li_1.gif) no-repeat 0 0 #000000;
font:normal 16px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#b2b2b2; text-transform:uppercase; padding:0 0 14px 35px;
}
#right ul li.no2{
background:url(images/company_li_2.gif) no-repeat 0 0 #000000;
font:normal 16px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#b2b2b2; text-transform:uppercase; padding:0 0 14px 35px;
}
#right ul li.no3{
background:url(images/company_li_3.gif) no-repeat 0 0 #000000;
font:normal 16px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#b2b2b2; text-transform:uppercase; padding:0 0 14px 35px;
}
#right ul li.no4{
background:url(images/company_li_4.gif) no-repeat 0 0 #000000;
font:normal 16px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#b2b2b2; text-transform:uppercase; padding:0 0 14px 35px;
}
#right ul li span{
font:normal 12px/16px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#B2B2B2; text-transform:none; background-color:#000000;
}
#right ul li span a{
font:bold 12px/16px Arial, Helvetica, sans-serif;
color:#c00000; text-decoration:none; background-color:#000000;
}
#right ul li span a:hover{
background-color:#000000; color:#b2b2b2;
}


/*------------------------------------------Right End----------------------------------*/
#footerOutside{

background-color:#121212; color:#FFFFFF;
}

#footer{
margin-top: -107px; /* negative value of footer height */
margin:0 auto; width:681px;
background:url(images/footer_logo.png) no-repeat 0 0 #121212;
color:#FFFFFF; height:107px;
padding:16px 46px 0 51px;

}


#footer ul.nav{
margin:0; padding:0; list-style:none;
}

#footer ul.nav li{
font:bold 11px/13px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#FFFFFF; background-color:#121212; float:right;
display:block;
}

#footer ul.nav li a{
font:bold 11px/13px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#FFFFFF; background-color:#121212; text-decoration:none; padding:0 8px;
}
#footer ul.nav li a:hover{
background-color:#292929; color:#FFFFFF;
}

#footer p{
width:454px; margin:5px 5px 8px 0; text-align:right;
height:16px; background-color:#1C1C1C; color:#121212;
float:right;
}
#footer p span{
font:normal 12px/16px Arial, Helvetica, sans-serif;
color:#b2b2b2; background-color:#1C1C1C;
}

#footer ul.navlink{
margin:0; padding:0; list-style:none;
}

#footer ul.navlink li{
font:bold 12px/16px Arial, Helvetica, sans-serif;
color:#FFFFFF; background-color:#121212;
float:right;
}

#footer ul.navlink li a.xhtml{
background:url(images/xhtml_icon.gif) no-repeat 42px 2px #121212;
font:bold 12px/16px Arial, Helvetica, sans-serif;
color:#FFFFFF; text-decoration:none; width:40px;
padding:0 15px 0 0; display:block; margin:0 8px 0 0;
}
#footer ul.navlink li a.xhtml:hover{
background:url(images/xhtml_icon.gif) no-repeat 42px 0px #121212;
color:#FFFFFF;
}

#footer ul.navlink li a.css{
background:url(images/xhtml_icon.gif) no-repeat 27px 2px #121212;
font:bold 12px/16px Arial, Helvetica, sans-serif;
color:#FFFFFF; text-decoration:none; width:38px;
padding:0 7px 0 0; display:block;
}
#footer ul.navlink li a.css:hover{
background:url(images/xhtml_icon.gif) no-repeat 27px 0px #121212;
color:#FFFFFF;
}

#footer ul.design{
margin:0; padding:6px 6px 0 0; list-style:none;
}

#footer ul.design li{
font:normal 12px/16px Arial, Helvetica, sans-serif;
color:#FFFFFF; background-color:#121212;
float:right;
}
#footer ul.design li a{
font:bold 12px/16px Arial, Helvetica, sans-serif;
color:#b2b2b2; background-color:#121212; text-decoration:none;
text-transform:uppercase;
}
#footer ul.design li a:hover{
background-color:#292929; color:#c00000;
}

/*------------------------------------------Footer End----------------------------------*/


.clearfix:after {content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}

.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */