I'm trying to create a very simple 2 column layout with floating `div`'s in html. The problem is that the following `div`, `foot` is always being rendered to the right of the `right` div. I know I should be using a `clear` statement somewhere, but I'm not sure which is the proper spot.

Also, as you can see in left I've explicitly specified the height of `left`. Is there a way to set force `right` to be of the same height without specifying it again? 

```
<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>

```