Html css2列布局：列高度

我正在使用

div

构建一个简单的html双栏布局

问题是我无法使

右侧

列与

左侧

列具有相同的高度

<div id="container">

    <div id="left" style="float: left; width: 200px; background: #DDFFDD;">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
    </div>

    <div id="right" style="float: left; width: 600px; background: #DDDDFF">
        <p>main</p>
    </div>
</div>

一,

二,

三,

四,

主要

如您所见，右栏的高度与左栏的高度不匹配。我希望他们是平等的

---

编辑：我们不知道高度，因为列中的内容是动态的。而

left

或

main

中的内容可能是最大高度。

我主张在这个练习中使用

表格，但这是一个不同的争论

您是否尝试过设置div的高度？

这个网站有一个很好的解释，我觉得很难与之匹敌

祝你好运
 如果您只想让它们保持相同的高度，请明确声明。如果你想让它们都能膨胀，而最高的一个决定了两者的高度，那么请改写问题

只需将以下内容添加到两个样式标记中

style="height: 500px;"