Agreed i am appauling, but i do php mainly
This is what i want:
http://www.tehupload.com/9432864328.png
For that you will need 3 containers to position your divs in.
The first one is the main container, make the width of this the width of what is going to be inside (The boxes , margins and padding) and have no height attribute, also add the overflow: hidden; code for it's CSS. To center it have it as
margin-left: auto;
margin-right: auto
margin-top: what ever you want.
The second container should be for the 2 smaller boxes that are going to be on the left, Set the width for this as the exact width off the nav box with no height variable. Put a float: left; tag in the CSS aswell.
The 3rd is going to be for the main content box and have the width of it the same as what the boxe's width is. Have it floated to left with the following code; Float: right;
For all of this to work the total width of everything must not exceed the width of the container.
Your coding syntax should look something like this:
<body>
<div id="container">
<div id="left">
<div id="nav">
<div id="nav_top"></div>
<div id="nav_mid"></div>
<div id="nav_bot"></div>
</div>
<div id="login">
<div id="login_top"></div>
<div id="login_mid"></div>
<div id="login_bot"></div>
</div>
</div>
<div id="right">
<div id="main">
<div id="main_top"></div>
<div id="main_mid"></div>
<div id="main_bot"></div>
</div>
</div>
</div>
</body>
I hope I helped as this took forever just to type up on the spot :(.