Forum Moderators: not2easy

Message Too Old, No Replies

Column heights.... what is the best way?

         

djclark

10:11 am on Apr 13, 2005 (gmt 0)

10+ Year Member



I am struggling to understand how to get float heights to expand to the height of the container...

Through different projects i have forced things using explicit heights e.g.500px .... which has been the wrong thing to do but at the time it got me through...

Now i need to work out the best way to do this...

For instance... say i have a container that has 2 floats in it.... now the float on the right has more content, which forces the height to be larger... meanwhile the left stays short.

So my question is, what is the best way to make both columns expand to the height of the of the biggest float in the container? (without any javascript if possible... )


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style>
<!--
#container{ width:300px; background-color:#000000;}
#left{ float:left; background-color:#00FF66; color:#FFFFFF; }
#right{ float:left; background-color:#FFFF00; color:#FFFFFF;}

-->
</style>
</head>
<body>
<div id="container">
<div id="left">Some text</div>
<div id="right">
<p> more text</p>
<p> more text</p>
<p> more text</p>
<p> more text</p>
<p> more text</p>
</div>
<div style="clear:both; "></div>
</div>
</body>
</html>

[edited by: SuzyUK at 8:48 pm (utc) on April 18, 2005]
[edit reason] message formating only.. [/edit]

Condor12

10:43 am on Apr 13, 2005 (gmt 0)

10+ Year Member



Hi djclark,

The best place to start is at a list a part dot com search for faux columns

This is a method that I use to great success.

Alan

djclark

11:45 am on Apr 13, 2005 (gmt 0)

10+ Year Member



Not quite what i was after.....

i have used that on some things, but do i need to create backgrounds for designs that have lots of floats?

there has to be a better way doesnt there?