html - 如何创建两个div元素，左边固定宽度，右边动态宽度

Question

我想创建两个 div 元素，左侧 具有固定宽度(例如:200px)，右侧 具有动态宽度(例如:100%)。

我已经创建了，但没有按要求工作。

HTML

<div id="header">Header</div>
<div id="container">
    <div id="left">Left</div>
    <div id="right">Right</div>
</div>

CSS

div#header {
    height:70px;
    border:1px solid;
}
div#left {
    width:200px;
    height:500px;
    float:left;
    border:1px solid red;
}
div#right {
    width:100%;
    height:500px;
    float:right;
    border:1px solid green;
}

您还可以看到 demo on JSFiddle

Answer 1

移除右边元素的 float 。查看demo here

div#right {
    height:500px;
    border:1px solid green;
}