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.