How to attach div to bottom without absolute?

css, html

Solution

Try like this..

The 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's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

The HTML

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

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

Problem

So I have a footer: ``` <div id="footer" > <div style="padding:20px;"> Footer </div> </div> ``` Which is in wrapper with style : ``` #page { width:964px; margin:0 auto; } ``` So I need that the footer div would be attached to the bottom of the browser. The problem is if I adding: ``` position:absolute; bottom:0; ``` Some of the previous div intersects with footer and also i need to set height and width by my self.

Original source