css - CSS Div が正しく配置されていない

Question

これはばかげた質問だと思います.cssのささいなことはいつも私を悩ませます。とにかく、デザインがあり、2列にしようとしています。1 つ (300px のサイドバー) が右側にあり、もう 1 つの列が残りのスペースを埋める必要があります。

ご覧のとおり、サイドバーは左側の 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;
}

助けてくれてありがとう、ジェイク。