Layout with Div

[mtran]

Hi I want to do the following layout with CSS - just started learning:

Below is my code. Container is the biggest one holding everything. Content 1, 2, 3 don't line up the way I want them; instead they're pushed to the bottom of the page. Could you help me fix it?
Thanks

#container { background-color:#ffffff; width:760px; border:1px solid; margin:0 auto; text-align:left; }
#logo	   { background:url(img/top_gradient.jpg) top left no-repeat; background-color:#cfd6dc; font: 10px; color:#333333; 			
			 text-align: right; height:51px; margin:10px 0 0 0;}
#leftnav   { float:left; margin:0; background-color:#eeeeee; width:180px; height:705px; }

#banner	   { float: left; margin:0 0 4px; height: 50px; text-align:right; }
#content1  { float: left; margin:0 0 4px; height: 260px; text-align:right;}
#content2  { float: left; margin:0 0 4px; height: 200px; text-align:right;}
#content31 { float: left; margin:0 0 4px; height: 180px; width:260px; text-align:left;}
#content32 { float: left; margin:0 0 4px 10px; height: 180px; width:260px; overflow: auto;}

[Vallim]

Hi Mtran,

You can use the following Css styles

<style type="text/css">
#container { background-color:#ffffff; width:1000px; border:1px solid; margin:0 auto; border:1px solid; text-align:left; }
#logo { background:url(img/top_gradient.jpg) top left no-repeat; border:1px solid; background-color:#cfd6dc; font: 10px; color:#333333;
text-align: right; height:51px; width:1000px; align:center; margin:10px 0 0 0;}
#leftnav { float:left; margin:0; border:1px solid; background-color:#eeeeee; width:180px; height:705px; }
#content1 { float: left; margin:0 0 4px; height: 235px; width:815px; text-align:right; border:1px solid;}
#content2 { float: left; margin:0 0 4px; height: 235px; width:815px;text-align:right; border:1px solid;}
#contentContainer { float: left; margin:0 0 4px; height: 230px; width:815px; text-align:left; }
#content31 { float: left; margin:0 0 4px; height: 223px; width:430px; text-align:left; border:1px solid;}
#content32 { float: left; margin:0 0 4px 10px; height: 223px; width:370px; overflow: auto; border:1px solid;}
</style>

You have to nest the div tags as given below.Content 31 and Content 32 must be placed in another div tag named as contentContainer here , so that they would be pushed to tbe bottom.

<div id="container">
<div id="logo">logo</div>
<div id="leftnav">leftnav</div>
<div id="content1">content1</div>
<div id="content2">content2</div>
<div id="contentContainer">
<div id="content31">content31</div>
<div id="content32">content32</div>
</div>
</div>

Let me know if you have any doubts.

Regards,
Valli