[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