...

View Full Version : sticky css footer with 100% height content container.



sackstein
01-25-2012, 08:45 PM
I am using this technique for a sticky footer: http://ryanfait.com/sticky-footer/

I wanted to create a border around my entire site that also encapsulates the footer but has passing around the entire page but ended up with this: http://i.imgur.com/jy9vN.jpg

Notice how the white box is not moving down to the footer.

Here is the jsfiddle showing this problem: http://jsfiddle.net/hc3Xu/14/

*I had previously asked a similar question not realizing it was the footer and I got an answer telling me that it is the height: auto !important; in the container class that was the cause of the contentcontainer not stretching to 100%. Removing that however causes a problem with the footer not being set to the bottom of the page. So I can't figure out how to proceed.

aaronhockey_09
01-26-2012, 01:03 AM
maybe try

clear:both;

inside of the footer css

sackstein
01-26-2012, 05:07 AM
naw doesnt work

aaronhockey_09
01-26-2012, 07:08 AM
Is this what your looking for ?
Have a div that wraps with a grey colour and border.
White div on inside that goes all the way down.
and footer stays at the bottom ?

HTML
body>

<div class="wrapper">
<div class="container">
<div class="contentContainer">
test
</div>
</div>
<div class="push"></div>

</div>



<div class="footer">

<ul id="footer_listies">
<li><a href="terms.php">Terms and Conditions</a></li>
<li><a href="privacy.php">Privacy Policy</a></li>
<li><a href="<?php echo tep_href_link(FILENAME_CAREERS); ?>">Careers</a></li>
<li><a href="Follow.php">Follow Us</a></li>
<li><a href="contact.php">Contact Us</a></li>

</ul>


</div>
</body>


CSS
@charset "utf-8";
/* CSS Document */

*{margin:0; padding:0;}
body { margin: 0 auto; color: #333333; background-color:#99FF33; }
html, body { color: #000000; margin:0; padding:0; height:100%; }

.wrapper {width:940px; margin-left:20px; border:1px solid #9C0; margin-right:20px; background:#999; overflow:hidden; margin:0 auto; height:100%;}
.container {min-height:100%; height: auto !important; height:100%; margin: 0 auto -20px; width:900px; background:URL(images/bg_sides.jpg) repeat-y #ffffff;}
.contentContainer {width:920px; margin:0 auto; height:100%; }
.clear-fix { width:100%; height:20px; clear:both; }

.footer { height: 20px; width:940px; margin:0 auto; background:#990000; position: relative; }
.footer .push { height:20px; }


#footer_listies{height:20px; padding-top:5px;}
#footer_listies li{list-style:none; display:inline;}
#footer_listies a { padding-right: 10px; font-weight:bold; font-family:"Lucida Grande","Lucida Sans Unicode","Lucida Sans","DejaVu Sans","Bitstream Vera Sans","Liberation Sans",Verdana,"Verdana Ref",sans-serif; background:none;}
#footer_listies a:link, #footer_listies a:visited
{
color: #666;
text-decoration: none;
font-family:"Lucida Grande","Lucida Sans Unicode","Lucida Sans","DejaVu Sans","Bitstream Vera Sans","Liberation Sans",Verdana,"Verdana Ref",sans-serif;
text-transform:uppercase;
font-size: 75%;
font-weight:normal;
background:none;


}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum