html - 两列不重叠的div布局

Question

经过整整两天的研究和各种测试，我似乎无法真正解决这个问题。我需要一个 div，它包含两个 div 并排作为两列，如图所示。 http://i.gyazo.com/bbfdcf09a2178fc0e662c59fae995988.png

第一个 div(白色)必须采用正确的大小以正确包含两列。

我基本上尝试了两种方法:1)使两列 float :左并添加一个清晰的:两者都是空的div。问题是，当一根柱子比第一根柱子高时，它会环绕它。代码是:

<div style="position:relative; background-color:#fff">
<div style="float:left; width:50px;">
    this is the first column
</div>
<div style="float:left; font-family:trebuchet MS, sans-serif;">
    The second column..contains various divs.
    <div> a header </div>
    <div> some more contents </div>
    <div> a footer </div>
</div>
<div style="clear:both;"></div></div>

2) 使两列 position:absolute 并手动放置它们。它有效，但我无法让容器正确调整大小..

Answer 1

我不知道这段代码相对于您页面上其余代码的上下文，但是您可以使外部 div float 吗？因为它包含两个 float 的 div 但它本身不 float ，所以它会折叠并且其白色背景不会向下延伸以匹配其中的 div 的高度。让它 float 也意味着它确实如此，你也可以摆脱 <div style="clear: both;"></div>标签。

我已经删除了您的一些代码，只留下了我要处理的问题的症结所在:

<div style="float: left;">
    <div style="float:left; width: 50px;">
        this is the first column
    </div>
    <div style="float: left;">
        The second column..contains various divs.
        <div> a header </div>
        <div> some more contents </div>
        <div> a footer </div>
    </div>
</div>