我正在尝试用html中的浮动div创建一个非常简单的2列布局.问题是下面的div,foot总是被渲染到右边div的右边.我知道我应该在某处使用明确的声明,但我不确定哪个是正确的位置.

另外,正如你在左边看到的那样,我明确指出了左边的高度.有没有办法将力设置为相同的高度而不再指定它？

<div id="main">
    <div id="left" style="float: left; width: 150px; background: #DDDDDD; height: 500px;"> 
        left column
    </div>

    <div id="right" style="float: left; background: #EEEEEE;">
        right column
    </div>
</div>

<div id="foot">
    footer
</div>