View Full Version : min heights and expanding regions

Feb 4th, 2010, 08:19 PM
how do i get the columns on the left and right side of my page to reach the bottom of the wrapper div so that all the bottoms line up, regardless of what height the page is, as it will expand and contract based on how much content is in the middle???

please advise. thanks!

Feb 4th, 2010, 08:37 PM
Hello again sixrfan,
That's what Faux Columns can do for you. Have a look at my faux columns demo (http://nopeople.com/CSS/faux_columns/index.html) or google it for lot's more examples.

You need to clear your floats in that site you linked to.

Feb 4th, 2010, 09:41 PM
thanks. i cleared the floats but to no avail. i'm a little confused by the example you provided. is the key overflow: auto;??? if so, where do i put that in my css?


Feb 4th, 2010, 11:46 PM
I'm sorry, I should have said you also need to clear them. Seperate issue.
The faux columns demo is one method of creating equal length columns.

To clear your floats, overflow:auto; is a good method. See it described here (http://www.quirksmode.org/css/clearing.html).

Feb 5th, 2010, 10:03 PM
so i actually decided, for simplicity sake, just to make everything a fixed width. seems to have worked...for the most part.

however in IE7, and below, the alignment is all out of wack. all the stuff that should be to the right of the "left column" div, actually appears below it.

please adivse how to fix. thanks!

Feb 5th, 2010, 10:53 PM
Last edited by sixrfan; 02-04-2010 at 02:16 PM.. Reason: removed link

I can't even remember what it looked like... old age I guess.

When one column drops like you're describing, it is either float drop caused by the box model being off, or by the browsers interpretation of the box model being off - ie. a browser bug.
That can happen when you specify exact pixel widths that all need to exactly fit.

If yours is a 2-column layout, a good way of avoiding float drop issues for any reason can be seen in this 2 column layout demo (http://nopeople.com/CSS/simple_2-column/index.html).

Floating the left one allows the right one to come up beside it.
The right column's margin-left is the width of the left column so they don't overlap.
By not giving the right column a width, it expands to fill whatever available space is left in your container...even in a browser that would normally have a wrong interpretation of the box model.

Hope that helps a little...

Feb 5th, 2010, 11:03 PM
sorry, i forgot i removed the link, here it is: http://www.filipposonfirst.com/