html - 向左 float div，向右 float 其他div

我试着把菜单的浮动部分调整到左边，另一部分调整到右边。但是，我不能让它工作。
我一直试图用floats来完成它，但是我不能完全让它工作。
我怎样才能用正确的方式做到这一点？
HTML格式

<div class="topbar">
    <div class="title">Title</div>

    <div class="topbar-boxes">

        <div class="topbar-boxes-left">
            <div class="topbar-box">Box1</div>
            <div class="topbar-box">Box2</div>
            <div class="topbar-box">Box3</div>
        </div>

        <div class="topbar-boxes-right">
            <div class="topbar-box">Box1</div>
            <div class="topbar-box">Box2</div>
            <div class="topbar-box">Box3</div>
        </div>

    </div>

    <div style="clear:both"></div>
</div>

CSS

.topbar {
    width: 100%;

    padding: 14px;

    font-size: 18pt;
    color: white;

    background-color: rgba(42, 42, 42, 0.95);
}

.title {
    float: left;
    padding-right: 50px;
}

.topbar-boxes {
    float: left;
    margin: -14px;
}

.topbar-boxes-left {
    float: left;
}

.topbar-boxes-right {
    float: right;
}

.topbar-box {
    float: left;

    padding: 20px;

    border-left: 1px solid black;

}

http://jsfiddle.net/8eqSN/

最佳答案

您的问题是，您正在浮动.topbar-boxesdiv。当您浮动时，元素的长度将尽可能地变细（而不是像您通常期望的那样填充页面的宽度），因此您的浮动是有效的，您只是看不到它，因为父div仅与子元素一样宽。
要修复，请移除此浮动：

.topbar-boxes {
    /*float: left; <----- remove this.*/
    margin: -14px;
}