0

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;      
}
Sirko
  • 72,589
  • 19
  • 149
  • 183
medina
  • 766
  • 1
  • 11
  • 31

2 Answers2

1

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

Community
  • 1
  • 1
Ashish Gupta
  • 1,651
  • 14
  • 30
  • When I remove absolute positioning to the content div the footer appears but only below the last piece of content in the content div. It is not stuck to the bottom of the browser. – medina Jun 13 '12 at 14:54
  • Did u checked the jsfiddle i shared. It clearly sticks to the end of the bottom. Maybe u can provide your own jsfiddle with the underlying problem. – Ashish Gupta Jun 13 '12 at 15:26
  • Yeah I saw that. I have it working independently in plain html and css but I think it has something to do with the @renderbody. This is in .net. It seems to work on some page but not on others. – medina Jun 13 '12 at 15:29
  • put your generated html in jsfiddle and css!! – Ashish Gupta Jun 13 '12 at 15:32
  • it will break as it is pre compiled asp.net mvc so it is useless. im pretty sure the @renderbody is the issue. – medina Jun 13 '12 at 15:44
1

Like Fidrizers said, there should be no need for absolute positioning #content.
But in some reasons, e.g. special interface design, it can be useful.

To create a sticky footer, the workaround from ryan fait is the most easy and stable way i know:
http://ryanfait.com/sticky-footer/

You can apply this to your layout and set the #content absolute with top: 125px; right: 0; bottom: 100px; left: 0.

Important: The problem now is, that the content can disappear, depending on the viewports width and height. I really don't recommend to do this, but it may fix your problem.

Demo: http://jsfiddle.net/ubJAf/2/

doptrois
  • 1,560
  • 11
  • 10