Stretching to the same heignt as a floating DIV in the same container

layout problem

[voidstate]

Hi

I have made a simple CSS layout. It consists of a container DIV. Within this DIV is a menu DIV which is floated left and a content DIV which has a margin set to the left. Below all this is a fotter DIV.

The problem I have is getting the content DIV to be as tall as the floated menu DIV. I want this to happen because I want the two columns to have different background colours.

The html is below:

CSS:

body {
margin:20px;
text-align:left;
font-family:Arial, Helvetica, sans-serif;
font-weight:normal;
font-size:12px;
}
#outer {
text-align:left;
border: 1px solid;
width:650px;
margin:10px auto;
background-color:#FFFFFF;
}
#bodyblock {
display:inline-block;
background-color:#0000FF;
}
#l-col {
float:left;
width:145px;
text-align:left; 
}
#content {
display:inline-block;
border-style:solid;
border-width:0 0 0 1px;
text-align:left;
padding: 5px;
margin: 0 0 0 150px;
background-color:#00FF00;
}
#ftr {
clear:both;
text-align:center;
background-color:#FF0000;
}

HTML:

<div id="outer">
<div id="bodyblock">
<div id="l-col">
Lorem ipsum<br />
dolor sit<br />
amet,<br />
consectetuer<br />
adipiscing<br />
elit,<br />
sed<br />
diam nonummy<br />
nibh<br />
euismod tincidunt<br />
ut laoreet<br />
dolore<br />
magna<br />
aliquam erat volutpat.<br />
Ut wisi<br />
enim ad<br />
minim<br />
veniam,<br />
quid
</div>
<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</div>
<div id="ftr">Lorem ipsum dolor sit amet..</div>
</div>

As you can see, the area behind the main area of copy is coloured but the column needs to stretch down to the bottom of the page.

Is there some way I could achieve this?

Thanks

voidstate

[jetboy_70]

In short, you can't. But you can fake the effect by using tiling graphical backgrounds on elements other than the content ones.

Ryan Brill's Creating Liquid Layouts with Negative Margins on A List Apart uses this technique, as does Position Is Everything's Big John at:

[positioniseverything.net ]