CSS Divs未正确对齐

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

感谢任何帮助，杰克。

Answer 1

浮动元素应首先出现在html：

中

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

Demo