[web] CSS Question.
Author
Is there a way to line up a div block to the bottom of another div block? The idea is a page container that has a fixed min-height and then to always align the footer to the bottom. I can do it now by filling up the vertical space with div blocks that have % heights that total 100% but this tends to break other things.
Tim.
There are several ways to stick a div to the bottom of another div. Unless I misunderstood what you want, the easiest method in this case is to put two divs inside the page container div, and assign the min-height to the first contained div.
P.S. I'm not sure what you mean by page container, but unless it has a border or special positioning or something, the page container div is redundant in my example.
_____________________________________| Page container div. || Has no height specification. || _________________________________ || | Everything except the footer | || | goes here. | || | Specify a min-height for this | || | div only | || |_______________________________| || _________________________________ || | Footer | || |_______________________________| ||___________________________________|P.S. I'm not sure what you mean by page container, but unless it has a border or special positioning or something, the page container div is redundant in my example.
You could have a block with a minimum height of 100% with a bottom-margin greater than the height of the footer, followed by the footer with a negative top margin.
Be aware that Internet Exploder does not support the min-height property, though it should degrade nicely.
Be aware that Internet Exploder does not support the min-height property, though it should degrade nicely.
Wrap one div wrap around both, and apply vertical-align:bottom; to both the divs you want to line up.
This topic is closed to new replies.
Advertisement
Popular Topics
Advertisement
