ansaurus

Question

Answer 1

A:

try min-height for the one that needs to grow

Nick 2009-02-03 15:41:22

In case anyone still cares about Internet Explorer 6, min-height isn't supported by it for divs. It appears to be fully supported by the newest versions of all the major browsers, though, so disregard this unless if you're a huge stickler for browser compatibility.

Phantom Watson 2009-02-03 20:39:15

Answer 2

+1 A:

This works in everything except IE6; for that you'll need a conditional comment and css expression to set a height instead of bottom on #leftColumnMiddle

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
<html><head>
<style>* { border: 1px solid black;}
#contentWrapper     { position: relative; float:left; width: 450px; }
#leftColumnTop      { position: absolute; width: 100px; height: 50px; left: 0; background-color: gray; }
#leftColumnMiddle   { position: absolute; width: 100px; top: 50px; bottom: 50px; left: 0; background-color: red; }
#leftColumnBottom   { position: absolute; width: 100px; height: 50px; left: 0; bottom: 0; background-color: gray; }
#content            { width: 300px; float: left; margin-left: 100px;}
#footer             { width: 400px; clear: both; }
</style>
</head>
<body>
<div id="contentWrapper">
    <div id="leftColumnTop"> </div>
    <div id="leftColumnMiddle"> </div>
    <div id="leftColumnBottom"> </div>
    <div id="content">content<br>
    here<br>more<br>more<br>more<br>more<br>more<br>more<br>
    </div>
</div>
<div id="footer">footer text</div>
</body>
</html>

And to the commenter - it nearly worked, so that's why. ;)

Andrew Duffy 2009-02-03 15:42:20

Just delete the damned answer, then =)

gnud 2009-02-03 16:03:53

It seems to do the job, brilliant! Fortunately, I don't have to care about IE6 too much.

ya23 2009-02-04 09:32:47

Answer 3

A:

If you need both columns to be of equal height, and work in IE6, you basically have to hack.

A solution I've used in the past involves setting up a fake margin/padding for one of the columns. This assumes that you know a upper limit of how large the columns can grow (could be in the magnitude of several thousand px's).

This solution is outlined here.

Quoting from the page I linked:

The basic method works like this:

Blocks which will act as columns must be wrapped in a container element

Apply overflow: hidden to the container element

Apply padding-bottom: $big_value [2] to the column blocks, where $big_value is a
large enough value to guarantee that it's equal to or larger than the tallest column
Apply margin-bottom: -$big_value to the column blocks

gnud 2009-02-03 15:58:33

ansaurus

tags:

views:

answers:

Make a div fill the space

related questions