如何使浮动元素占据其父元素的整个宽度

Question

请参阅下图。

我有一个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%
}