Layout problem

Im trying to create a layout as shown below, but Im having problems when the content in "MAIN" is longer than 100% (near X). The column with the logo simply does not stretch. Using "position: fixed" solves it, but I dont want the logo to stay on top. The background color should be shown when the user scrolls down.

Its split into two colums, where the left one has a fixed width and the right is fluid. The right column is split into four rows, where row 1,2 and 4 have fixed heights - making row 3 fluid. No rows have fixed positions.

What have I done wrong, or is missing ?

Layout
| | Topbar |
|L|---------|
|O| Menu |
|G|---------|
|O| |
| | M A I N |
| | |
| |---------|
|X| Footer |

HTML
<div id="container">
<div id="leftCol">
<div id="logo"></div>
</div>
<div id="rightCol">
<div id="info"></div>
<div id="menu"></div>
<div id="content">Content</div>
<div id="footer">Footer</div>
</div>
</div>

CSS
html,body{
margin:0;
padding:0;
width: 100%;
height: 100%;
min-height: 100%;
}
/* LAYOUT */
div#container{
width: 100%;
height: 100%;
min-height: 100%;
float: left;
}
div#leftCol{
width: 43px;
height: 100%;
min-height: 100%;
float: left;
margin-right: 10px;
}
div#rightCol{
padding-left: 53px;
margin-right: 5px;
}
div#logo{
height: 100%;
min-height: 100%;
background-image: url('/images/logo.jpg');
background-repeat: no-repeat;
}
div#topbar{
margin-left: -10px; /*strech to touch #leftcol*/
margin-bottom: 5px;
padding: 5px 0px 5px 25px; /* top right bottom left */
display: block;
height: 15px;
line-height: 15px;
border-bottom: 1px solid gray;
background: InfoBackground url('/images/image.gif') no-repeat 6px 4px;
font: message-box;
color: InfoText;
overflow: hidden;
z-index: 1;
}
div#menu{
height: 20px;
margin-top: 5px;
border-bottom: 1px solid black;
}
div#content{
height: 100%;
margin-top: 10px;
margin-bottom: 10px;
}
div#footer{
height: 20px;
}

You may have to use some faux column approach (http://www.alistapart.com/articles/fauxcolumns/).

Have a try by modifying http://www.bonrouge.com/2c-hf-fluid.php in such a way that first remove the current header part from html and CSS and then stack your rows inside the div having id="main".

What happens if you remove the 100% height parameter from the left column? Leave the min set at 100% but don't specify a max. Does that work?

You may have to use some faux column approach (http://www.alistapart.com/articles/fauxcolumns/).

Have a try by modifying http://www.bonrouge.com/2c-hf-fluid.php in such a way that first remove the current header part from html and CSS and then stack your rows inside the div having id="main".
I dont see how any of the faux columns tricks apply to my problem.

Removing the header, just makes it looks like an early version of the layout I want. Counter-useful.

What happens if you remove the 100% height parameter from the left column? Leave the min set at 100% but don't specify a max. Does that work?
It removes the entire logo div, but I assume its just minimized to 0px high. Switching the background images to a img tag does the same.

If you give #container, #leftCol and #rightCol a different background-color does it show the color from #right extends to the X area. Changing the padding-left in #rightCol to margin-left reveals that its #container which limits the height. Any ideas why it does ?

In case you didnt consider it, then the CSS code must work in IE6 & 7, FF2 & 3, Safari and hopefully Google Chrome too (this is the least important one as its still in beta).

Is your page posted somewhere?

It isnt.

It appears the problem is with height and min-height, so I had to remove those attributes. This meant #leftCol kept being "minimized", so I resorted to using a background-image as describe in the faux column approach.

Here is the code that works.
HTML
<div id="container">
<div id="leftCol">
<div><img src="/images/logo.jpg" /></div>
</div>
<div id="rightCol">
<div id="info"></div>
<div id="menu"></div>
<div id="content">Content</div>
<div id="footer">Footer</div>
</div>
</div>

CSS
html, body {
margin: 0;
padding: 0;
border: 0;
}
body {
color: black;
background: white url(/images/bg_leftcol.png) repeat-y 0 0; /* image is part of layout */
}
div#container {
width: 100%;
}
div#leftCol {
width: 43px;
position: absolute;
top: 0;
left: 0;
margin-right: 10px;
}
div#rightCol {
padding-left: 53px;
margin-right: 5px;
position: relative;
}
div#topbar {
margin-left: -10px; /*strech to touch #leftCol*/
margin-bottom: 5px;
padding: 5px 0px 5px 25px; /* top right bottom left */
display: block;
height: 15px;
line-height: 15px;
border-bottom: 1px solid gray;
background: InfoBackground url('/images/image.gif') no-repeat 6px 4px;
font: message-box;
color: InfoText;
overflow: hidden;
z-index: 1;
}
div#menu{
height: 20px;
margin-top: 5px;
border-bottom: 1px solid black;
}
div#content {
position: relative;
margin-top: 10px;
margin-bottom: 10px;
}
div#footer {
height: 20px;
}