css - 以百分比和边距并排显示 div？

Question

有没有办法让下面的盒子模型工作。我在一个容器中有 2 个 div，应该并排显示。我遇到的问题是我必须将左边的 div 推到一定数量还试图远离右侧 div 的负边距，因为它是制动响应式布局。

http://jsfiddle.net/Ubg6H/1/

<div id="header">
    <div id="left"></div>
    <div id="right">
        <div class="box">
            <div class="box_in">Sample</div>
        </div>
        <div class="box">
            <div class="box_in">Sample</div>
        </div>
        <div class="box">
            <div class="box_in">Sample</div>
        </div>
    </div>
</div>


#header {
    width:800px;
    margin:0 auto;
    overflow:hidden;
    background:#ccc;
    padding:15px;
}
#left, #right {
    display:table;
    background:green;
    height:200px;
}
#left {
    width:20%;
    float:left;
    margin-left:10px;
}
#right {
    width:80%;
    float:right;
    margin-left:10px;
}
.box {
    width:33.33%;
    float:left;
}
.box_in {
    background:red;
    margin:10px;
    display:block;
    height:100px;
}

感谢任何帮助。

Answer 1

解决办法

http://jsfiddle.net/Ubg6H/6/

使用

display:table;

和

display:table-cell;

感谢

http://mihaifrentiu.com/how-to-fill-the-available-space-when-using-floated-divs