Aligning height of divs

Forum Moderators: not2easy

Message Too Old, No Replies

Aligning height of divs

Left floating divs with same height (dynamic)

jonte

1:11 pm on Dec 10, 2005 (gmt 0)

I have three divs, with the property float: left;. The content of each div is dynamic, I don't know what height they will get. My goal is to make all three divs lign up with the same height to make background colors and borders lign up nicely.

Clear enough? :) If so, I'm thankful for any tips.

Jon

Span

1:36 pm on Dec 10, 2005 (gmt 0)

If this looks OK in Win/IE then maybe it's as simple as this. On my Mac it works in Safari, FF, etc.
I never use heights actually only for images.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Untitled</title>
<style type="text/css" media="all">
#container {
width:300px;
height:400px;
}
.floater {
width:100px;
height:100%;
float:left;
}
.a {
background:red;
}
.b {
background:orange;
}
.c {
background:yellow;
}
</style>
</head>
<body>
<div id="container">
<div class="floater a">1</div>
<div class="floater b">2</div>
<div class="floater c">3</div>
</div>
</body>
</html>

Note that I didn't clear the floats, so if #container needs a border you have to add a clearing break or div.

jonte

1:58 pm on Dec 10, 2005 (gmt 0)

It seems to me you are forcing the three columns to a height of 400px. This is not good enough for me. I want the columns to have the same height, however that height must be dynamic and depend on the div containing "the most" information.

createErrorMsg

2:45 pm on Dec 10, 2005 (gmt 0)

I want the columns to have the same height, however that height must be dynamic and depend on the div containing "the most" information.

Unless you set an explicit height somewhere, there's no way to make floated columns match in height based on the height of just one of those floated columns. Span's code above has tied the height of each float to the height of the container, but if the container does not have an explicit height, that 100% height setting is calculated based on the height of the content in each float.

If you need fully fluid, variable height columns that have the look of consistent, equal height, you'll need to use something like a Faux Columns technique (search for the article of the same name by Dan Cedarholm).

cEM

jonte

2:59 pm on Dec 10, 2005 (gmt 0)

Thank you createErrorMsg. It seems repeated background images is the only solution.

Jon