[thelist] Box model height
Thibaut Allender
mailing at capsule.org
Tue Jan 27 10:17:03 CST 2004
on 27/01/2004 17:03, Chris MacKenzie wrote :
> Is there a way to make both columns the same height in a two column box
> model.
>
> I have read that "There is no way to usefully declare: Have all boxes the
> height of the longest box" but I live in hope.
put the two cols in a container with display: table; and assign XX% to
height on both cols
(but won't work in IE, which doesn't support display: table)
example :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>two cols</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#container {
display: table;
}
#col1, #col2 {
float: left;
display: block;
height: 90%;
margin: 10px;
padding: 10px;
border-width: 3px;
border-style: solid;
}
.spacer {
visibility: hidden;
clear: both;
}
</style>
</head>
<body>
<div id="container">
<div id="col1">
blah<br />blah<br />blah<br />blah<br />blah<br />blah<br />blah<br />
blah<br />blah<br />blah<br />blah<br />blah<br />blah<br />blah<br />
blah<br />blah<br />blah<br />blah<br />blah<br />blah<br />blah<br />
</div>
<div id="col2">
blah<br />blah<br />blah<br />blah<br />blah<br />blah<br />blah<br />
</div>
<hr class="spacer" />
</div>
</body>
</html>
--
freelance + web|system developper|designer
+ 32 496 26 75 76 + http://www.capsule.org
More information about the thelist
mailing list