两列浮动（右侧和左侧）但内容位于中间

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