Sign in to follow this  
tstrimp

[web] CSS Question.

Recommended Posts

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.

Share this post


Link to post
Share on other sites
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.
_____________________________________
| 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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this