css - 对齐两个 div 出错了..？

Question

我试图并排对齐两个 div。这两个 div 都包含在另一个 div 中。

这是我编写的 HTML 和 CSS 代码，它出错得很厉害。

HTML:

<div id="content">     
 <div id="main"></div>
 <div id="sidebar"></div>     
</div>

CSS:

 #content {
    width: 1000px;        
}
#sidebar {
    width: 200px;
    float: left;
    height: 400px;
    background-color: red;
}
#main {
    width: 800px;
    margin-left: 200px;
    height: 400px;
    float: left;
    background-color: blue;
}

这是 jsFiddle

编辑:最终对我有用的代码如下:

<div id="content">

 <div id="sidebar"></div>
 <div id="main"></div>

</div>

css如下:

#content {
    width: 1000px;
    overflow: auto;
}
#sidebar {
    width: 200px;
    height: 400px;
    float: left;
}
#main {
    width: 800px;
    height: 400px;
    margin-left: 200px;
}

我不知道原因但是...

overflow : auto;

需要以正确的方式显示它。

Answer 1

去掉 margin-left: 200px;

jsFiddle example

这会将蓝色 div 推向右侧并导致红色 div 下降，因为没有足够的空间让两者并排存在。