How to? Fluid layout with background on right column?

[kerr]

Hiya

Have been struggling with this one for a while. I'm trying to do a two column layout with header. The main column is 70%, the right column is 30%. I want the right column to have a background colour that extends all of the way down to the end of the page. The main column usually has the most content.

What I have at the moment extends the background colour *only* to the end of the right column content, meaning that there's a gap below it.

Here's what is happening:


Here's what I want:


Here's what I have at the moment. I'd appreciate any help!

<div class="banner">banner</div>
<div id="main-wrap"><div id="main-section"><div class="main">main content</div></div>
<div id="right-section"><div class="right">right content</div></div></div>

div.banner {
overflow:hidden;
height:70px;
min-width:790px;
}

div#main-wrap {
background:#ddd;
width:100%;
min-width:790px;
}

div#main-section {
background:#fff;
float:left;
width:70%;
clear:both;
display:block;
}

div.main {
padding:10px;
float:left;
width:97%;
}

div#right-section {
background:#ddd;
width:30%;
right:0;
position:absolute;
height:100%;
}

div.right {
margin:0 9px;
}

[boogyman]

http://www.alistapart.com/articles/fauxcolumns/
http://www.ejeliot.com/blog/61