css - CSS Div 未正确对齐

Question

我觉得这是一个非常愚蠢的问题，css 中的小东西总能吸引我。无论如何，我有一个设计，我正在尝试做 2 列。一个（即 300 像素的侧边栏）位于右侧，另一列应填充剩余空间。

如您所见，侧边栏位于左侧的 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;
}

谢谢你的帮助，杰克。

Answer 1

Floating elements should appear first in the html:

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

Demo