make floating divs same height

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

make floating divs same height

Post 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.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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/
Post Reply