Page 1 of 1

make floating divs same height

Posted: Wed Jun 06, 2007 11:31 pm
by s.dot

Code: Select all

.left
{
        float: left;  width: 50%;
}
.right
{
        float: right; width: 50%;
}
How would I make these two divs be the same height, no matter the length of either div? I've tried giving the divs a container div and setting the div height to 100%, but it doesn't seem to work.

Posted: Thu Jun 07, 2007 12:04 am
by matthijs
You can't. Not if the content needs to be able to expand or you don't know the height of either of the divs.

You can make it appear like they have the same height. Using faux-columns. Wrap the divs in a containing div and set a repeating background image (1px high, as wide as the containing div) in it, with a border, or different background colors.

The original article is on alistapart:
http://wwwhttp://alistapart.com/articles/fauxcolumns/

For flexible layouts:
http://ilovejackdaniels.com/css/faux-co ... d-layouts/