Простая разметка div с двумя столбцами

Я пытаюсь создать очень простой макет из двух столбцов с плавающими div в html. Проблема в том, что следующий div , foot всегда отображается справа от right div. Я знаю, что где-то должен использовать оператор clear , но я не уверен, какое место подходит.

Кроме того, как вы можете видеть слева, я явно указал высоту ] слева . Есть ли способ установить силу справа на одинаковую высоту без повторного указания?

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