.css columns for website navigation

Question

I have something like the below for an electronic cigarette site I am designing:

<div id="top">
    //code
</div>
<div id="nav">
    //code
</div>
<div id="container">
    //code
</div>
<div id="bottom">
    //code
</div>

I want to structure it in a way that areas are defined by <div> tags and not by the contents themselves. Strictly speaking, things in a specific <div> element should be organized like the below:

I've tried things like float and it just looks tremendously ugly and text doesn't wrap properly. My first guess would have been to use css column properties but it splits the page into 2 parts with the bottom and top <div> elements being arranged above one or the other but never both.

I apologize if this is such a trivial task, but while I'm a pretty good logic programmer, css is not my strongest suit and it's something I generally devise through trial-and-error rather than rote memory or function.

The general spacing (ie. widths of <div> elements) is something I can accomplish, but just positioning things is something I'm at a loss about.

Here is the HTML:

http://pastebin.com/xbSypPcn

Here is the CSS:

http://pastebin.com/mZnBHPP0

Here is an image of what it looks like:

http://imageshack.us/a/img706/5117/uzbn.png

Here is an image of what I'd like it to look like: (excuse poor MSPaint work)

http://imageshack.us/a/img571/9219/uxm1.png

Excuse the very ugly site. I'd like to get the .css down before I furnish it to make it more aesthetically pleasing.

Answer 1

You should use something like this to accomplish your style task:

#top {
display: block;
height: 200px;
}
#left {
display: block;
width: 300px;
height: 500px;
float: left;
}
#right {
display: block;
width: 700px;
height: 500px;
float: right;
}
#bottom {
display: block;
height: 200px;
}

Combining the display: block with the right float and height and width settings should do the trick. I haven't tested this but the concept should help you get going in the right direction.

Additionally, you can nest div tags to get the desired text effect if the float is throwing this off.

For instance: You may want HTML that looks like:

<div id="right">
<div id="right_content">
Your text here
</div>
</div>

edit/addition: Thanks for adding your code HTML and CSS with the images is great! Since you are using a "liquid layout" % vs. px values... but you are still using px for your padding. I wonder if you took the padding values all out of the #contianer and #nav css styles it might fix it for you. It appears that you are very close now. You just need to trim the nav and container a bit so they look the way you are expecting them to look.

If you are using FF as a browser there is a great tool called Firebug that you can use to "inspect" your document. It will show you the html and corresponding HTML for whatever you point to. This tool has "saved my life" on many occasions.