使用Div标签/浮动的CSS常规格式

Question

我是CSS新手并且有一个一般性的问题，但有特定目的。

以下是相关网页：http://www.lymemd.org/indexmm6.php

我有几个DIV：＃BanneArea，＃BannerinLeft和#BannerinRight，它们都会格式化绿色方块中的所有内容。我想把所有东西分开，所以这样的东西：

如果有人能帮我指出正确的方向，我需要做什么标签以及我需要摆脱的标签，我将非常感激。我已多次尝试将一切都搞定，但我总是把事情变得更糟。

非常感谢。

Answer 1

最简单的方法是制作两个栏目，左栏包括Twitter和What's New div，右栏包括支持我们和Diane Rehm div。这两列必须浮动，因此请确保它们位于正确宽度的容器中。顶级div很容易。

这是一个jsfiddle：http://jsfiddle.net/83ngD/7/

基本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>

基本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;
}

现在只需用你想要的内容填充其他div。上面的代码将为您提供图片中的布局，但非常基本。