Menu
I have 4 divs. One is outer wrapper, and other 3 are header, content and footer respectively. All the are of same(fixed) width. But height of outer wrapper and content div are variable.
irrespective of the size of these, i want the footer div to stick at the bottom of outer wrapper. I have tried using the following CSS
position: relative;
bottom: 0px;
But it didn't work. Does anybody know a solution?
284
Set the position of div at the bottom of its container can be done using bottom, and position property. Set position value to absolute and bottom value to zero to placed a div at the bottom of container.
The footer div will need to be either: position:absolute;bottom:0; ; This will push it to the bottom of its container, however, when you scroll down past the container, the footer will scroll with it. position:fixed;bottom:0; ; This is used more often for sticky footers.
If position: absolute; or position: fixed; - the bottom property sets the bottom edge of an element to a unit above/below the bottom edge of its nearest positioned ancestor. If position: relative; - the bottom property makes the element's bottom edge to move above/below its normal position.
To align a div to the bottom, first you have to make the parent div's position relative, then make the required div's position to absolute and set the bottom property to zero.
<div style="position: relative; height: 100px; border: solid;">
<div style="position: absolute; height: 10px; border: solid; bottom: 0; right: 0; left: 0; ">
</div>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
