How to attach div to bottom without absolute?

Question

So I have a footer:

<div id="footer" > <div style="padding:20px;"> Footer </div> </div> 

What's in the shell with style:

 #page { width:964px; margin:0 auto; } 

I need the footer to be attached to the bottom of the browser. The problem is that I am adding:

 position:absolute; bottom:0; 

Some of the previous divs intersect with the footer, and also I need to set the height and width on myself.

Answer 1

Try it like this.

CSS

 html, body { height: 100%; } .wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -142px; /* the bottom margin is the negative value of the footer height */ } .footer, .push { height: 142px; /* .push must be the same height as .footer */ } 

HTML

 <div class="wrapper"> <p>wrapper text here</p> <div class="push"></div> </div> <div class="footer"> <p>footer text here.</p> </div> 

Answer 2

This is not exactly what you are asking for, but it is a similar implementation that I used with position: fixed .

For what you are trying to achieve, you will need to use position: absolute for this to happen. And then you will need to manually specify the height of the element so that it matches the correct one. And when you have content inside the footer , you can use padding to improve the shape.

These are the only options. Either choose fixed or absolute positioning.

Answer 3

Using:

 #footer { position: fixed; bottom: 0; } 

Here's a good article to understand how position: works