如何使浮動元素占據其父元素的整個寬度

Question

請參見下圖。

我有一個div（邊界框），其中包含兩個浮動的div，兩個都在內部浮動。 如何使第二個浮動div（紅色的div）將其寬度擴展到邊框內的所有可用空間。

現在，我正在使用javascript，但是CSS中沒有針對此的解決方案嗎？

編輯：

這是我的HTML的結構

<div id='container'>
    <div id='side'>
    </div>
    <div id='main'>
    </div>
</div>

我的CSS大致如下所示

#container {
     width: 100%;
     position: relative
     overflow: hidden;
}

#side {
     width: 200px;
}

#main, #side {
     float: left;
}

然后使用jquery設置#main的寬度

$('#main').width($("#container").width() - $("#sideview-sidebar").width());

請注意，我正在嘗試避免使用JS。

Answer 1

浮動#left

#left {
  float: left;
  width: 200px; /* eg. */
}

為#main設置邊距，不要使其浮動。

#main {
  margin-left: 200px;
}

如果要具有更大的靈活性，請在#main添加另一個div並設置其填充/邊距。

Answer 2

上面帶百分比的解決方案是最好的。 關於填充/邊距，您只需要設置它們的百分比即可。 然后可能是一個例子：

#side
{
   width:12%; padding:0 2%; margin:2%;
}
#main
{
   width:78%; margin-right:2%
}