Question

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>

Answer 1

Use clear:both on the foot div.

For your second question, you can set the main div to have a particular height, and then set the height of left and right to 100%.