Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Simple 2 column div layout

Tags:

html

css

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>
like image 583
Mike Avatar asked Jul 19 '11 13:07

Mike


1 Answers

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

like image 131
Michael Mior Avatar answered Sep 28 '22 02:09

Michael Mior