Search code examples
csspositioninghtmlcss-positionsticky-footer

Sticky CSS Footer with absolute positioning of previous div

I am trying to position the footer at the bottom of the browser window. The content div has absolute positioning because of the various changing heights of its content. I have looked at the several different ways of doing this but for some reason the majority break the #content div and the footer positions itself between the header and content div. Does anyone have any ideas?

Here is my html

<div id="header"></div>
  <div id="content">                                                                        
      @RenderBody()                                  
  </div>                              
 <div id="footer"></div>

Here is my CSS

#header {
height:115px;
position: relative;
color: #000;
padding-top: 10px;
border-bottom:1px solid #fff;
-moz-box-shadow: 0 0 10px 10px #ccc;
-webkit-box-shadow: 0 0 10px 10px #ccc;
box-shadow: 0 0 10px 10px #ccc;
}

#content {   
width:900px;
height:100%;
margin-top:40px;
margin-left:-450px;
left:50%;
position:absolute;    
}

#footer {
width:auto;
height:100px;
background:#d21f27;
margin-top:5px;
clear:both;
bottom:0;      
}
Solution

  • there is no need for position absolute for changing height.

    See the answer http://jsfiddle.net/XpKJG/

    Read when to use absolute and when not to