CSS Div 未正确对齐

Question

我觉得这是一个非常愚蠢的问题，css 中的小东西总是让我着迷。无论如何，我有一个设计，我正在尝试做 2 列。一个(300px的侧边栏)在右边，另一列应该填满剩余的空间。

如您所见，侧边栏位于左侧的 div 下方。

HTML:

<div class="wfix"><div class="col-fix">
    <div class="col-lg">
    <!-- 
       <div id="block">
           <bh>Homepage</bh>
        <detail id="test">Loading...</detail>
       </div> 
     -->
    </div>

    <div class="col-side">

    </div>
</div></div>

CSS:

.wfix{ margin-left: 5em; margin-right: 5em; }
.col-fix {
    display: table;
    width: 100%;
    table-layout: fixed;
}
.col-lg, .col-side {
    color: #999;
    margin: 0;
    padding: 0;
}
.col-lg {
    margin-left: 0;
    margin-right: 300px;
    padding-top: 0px;
    display: block;
    vertical-align: top;
    background-color: blue;
    min-height: 500px;
}
.col-side {
    width: 300px;
    float: right;
    padding-top: 0px;
    display: block;
    vertical-align: top;
    background-color: red;
    min-height: 500px;
}

谢谢你的帮助， jack 。

Answer 1

float 元素应该首先出现在 html 中:

<div class="wfix">
   <div class="col-fix">
      <div class="col-side"></div>
      <div class="col-lg"></div>
  </div>
</div>

Demo