CSS layout conversion question

i've created a layout with the basic plan shown below...I've been trying to do a tableless css layout using div's but I just can't get it to work properly. First I tried doing margins to align all the pieces, which worked with no content in in, but once I put content in each section and it stretched vertically the content areas would not connect up with the footer and the nav panel. Then I tried floating everything. The floating worked fine for the header area(header/member login) but below that it would not line up side by side but rather on a line lower. I'm very new to css and am not quite sure how to best go about coding a layout with the properties of the one below to work. Also...
the only stretching parts would be the content sections the rest would be non repeating. Nothing is stretching horizontally only vertically. One more thing, when one of the contents stretches more than the other(more content) I want the other to stretch with it, rather than just stretching for its own content. (I hope this makes sense, I'm sure a lot of this is redundant but I'm just trying to explain it the best way I know how)

Any help would be greatly appreciated. thank you

http://i38.tinypic.com/jjtvy9.jpg

Could you post your current code?
(Please use [code][code] tags to wrap your code while posting here)

body
{
background: #242621;
min-width:990px;
margin:auto;
}
#container
{
background: transparent;
margin:0 auto;
width: 990px;
}
#headerleft
{
background: url(images/header1.png);
height:123px;
width:576px;
float:left;
}
#headerright
{
height:123px;
width:414px;
float:right;
background: url(images/header2.png);

}
#navleft
{
height:28px;
width:720px;
float:left;
background: url(images/nav.png) no-repeat;
}
#searchright
{
float:right;
width:270px;
height:28px;
background: url(images/search.png) no-repeat;
}
#mainleft
{
width:720px
height:100%
float:left;
background: url(images/left.png) repeat-y;
}
#mainright
{
width:270px;
height:100%;
float:right;
background: url(images/right.png) repeat-y;
}
#footer
{
width:990px;
height:28px;
background:url(images/footer.png) no-repeat;
}



<div id="container">
<div id="headerleft"></div>
<div id="headerright"></div>
<div id="navleft"></div>
<div id="searchright"></div>
<div id="mainleft">
</div>
<div id="mainright"></div>
<div id="footer"></div>
</div>

This is just from the latter attempt using float, I didn't save the one using margins because it didn't work. =/

#headerleft
{
background: url(images/header1.png);
height:123px;
width:576px;
float:left;
}
#navleft
{
height:28px;
width:720px;
float:left;
background: url(images/nav.png) no-repeat;
}
Do you need different widths for your columns in each row(unlike what shown in the picture)?

I think you could modify http://bonrouge.com/2c-hf-fluid(r).php so that include your first two columns inside the header of this layout.

Yeah it's not a fluid layout. Where I indicated with my picture are the slices I have made on the layout. They are fixed sizes and I only need vertical stretching. The only slices out of that that will be not fixed are the main and right content which will stretch vertically.