浮动了两列（左右），但中间有内容

Question

为了简化起见，我已经简化了代码，但是下面是我的代码：

<div class = "content_wrapper">
    <div class = "left_side">
        LEFT SIDE<br>
            LEFT SIDE<br>
            LEFT SIDE<br>
            LEFT SIDE<br>
            LEFT SIDE<br>
            LEFT SIDE<br>
            LEFT SIDE<br>
    </div>
    <div class = "right_side">
        RIGHT SIDE<br>
                RIGHT SIDE<br>
                RIGHT SIDE<br>
                RIGHT SIDE<br>
                RIGHT SIDE<br>
                RIGHT SIDE<br>
                RIGHT SIDE<br>
    </div>
    <div class = "bottom">
        bottom content
    </div>
</div>

CSS是：

#content_wrapper
{
    width: 960px;
    margin: 0 auto;
}

div.left_side{margin:0px; width:100px; padding:0px 0 0 5px; float:left;}
div.right_side{margin:0px; width:100px; padding:0px 0 0 5px; float:right;}

您可以在这里看到它： jsfiddle 。

如何在两个左右容器中使底部内容正确？ 我不知道为什么div进入这两个的中间。

Answer 1

添加此CSS

.bottom {明确：两者;}

Answer 2

http://jsfiddle.net/L8YN6/2/

我想添加以下内容是可行的：

div.bottom {clear:both;}