Simple arrangement of two columns

Question

I am trying to create a very simple 2 column layout with floating div in html. The problem is that the following div , foot always displayed to the right of the div right . I know that I have to use the clear statement somewhere, but I'm not sure if this is the right place.

In addition, as you can see on the left, I explicitly indicated the height of the left . Is there a way to set the right force to 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 in the div foot .

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

Answer 2

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 for this help

Answer 3

Is this what you want?

 #foot{display: block; clear: both;} 

Answer 4

The foot separation should be cleared.

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

Regarding the problem with equal heights, I recommend using the faux-column method by Roger Johansson .

Keep in mind that there should be more content in the main column than in the other. In this case, it removes the 500px height limit and flexibly fits what you might want.

Answer 5

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

in css you can add this property to a class

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