Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Jan 2009
    Posts
    160
    Thanks
    40
    Thanked 1 Time in 1 Post

    Question sticky css footer with 100% height content container.

    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.

  • #2
    Regular Coder
    Join Date
    Dec 2010
    Posts
    414
    Thanks
    22
    Thanked 55 Times in 55 Posts
    maybe try

    clear:both;

    inside of the footer css

  • #3
    Regular Coder
    Join Date
    Jan 2009
    Posts
    160
    Thanks
    40
    Thanked 1 Time in 1 Post
    naw doesnt work

  • #4
    Regular Coder
    Join Date
    Dec 2010
    Posts
    414
    Thanks
    22
    Thanked 55 Times in 55 Posts
    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
    Code:
    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
    Code:
    @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;
      
    
    }


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •