Reputation: 60771

Simple 2 column div layout

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>

Upvotes: 6

Answers (5)

monk

Reputation: 215

create a empty div and put it at the end of right div just above the end of main div and give it class name of clrbth ..

in css you may add this property to the class

.clrbth {
clear:both;
margin:0;
padding:0;
}

Upvotes: 0

Nebojsa

Reputation: 493

Your CSS should look like this:

 #foot{
   clear: both;
 } 
 #left, #right{
   float: left; // remove this definiton from tag 
   height: 500px; // remove this definition from tag
 }

Hope this help

Upvotes: 2

josemota

Reputation: 984

The foot div should be cleared.

#foot { clear: left /* or both */; }

As for the equal heights challenge, I recommend you use the faux-column technique by Roger Johansson.

Bear in mind that the main column must have more content than the secondary one. If that's the case, it removes the 500px height constraint and is flexible to whatever you might want.

Upvotes: 0