CSS General Formatting with Div Tags/Floating - css

Question

I'm new to CSS and have a somewhat general question, but with a specific purpose.
Here is the webpage in question: http://www.lymemd.org/indexmm6.php
I have several DIVs: #BannerArea, #BannerinLeft, and #BannerinRight, all which format everything in the green square. I'm looking to split everything up and so something like this:
If anyone could help point me in the right direction in terms of what tags I'll need to do and what I'll need to get rid of, I would be very grateful. I have tried many times to get everything right, but I always end up making something worse.
Thanks very much.

Answer 1

The simplest way would be to make two columns, the left one including the Twitter and What's New div, and the right one including the Support Us and Diane Rehm divs. These two columns will have to float, so make sure they are in a container of the correct width. The top div is easy.
Here's a jsfiddle: http://jsfiddle.net/83ngD/7/
The basic HTML:
<div id="wrapper">
<div id="topgreen"></div>
<div id="leftcolumn">
<div id="twitter"></div>
<div id="whatsnew"></div>
</div>
<div id="rightcolumn">
<div id="supportus"></div>
<div id="dianerehm"></div>
</div>
</div>
The basic CSS:
#wrapper {
width: 960px; /*/ example width /*/
margin: 0 auto; /*/ centers the div /*/
}
#topgreen {
width: 100%;
height: 50px; /*/ example height /*/
}
#leftcolumn {
width: 50%;
float: left;
}
#rightcolumn {
width: 50%;
float: left;
}
Now just fill the other divs with the content you want. The code above will give you the layout from your picture, but very basic.