Question

I have created a layout using DIVs rather than tables. It seems to be working… I had to clear:none after each div consisting of column and content.

But i end up with an extra line under each 2 columns before the other 2 columns start. I will outlay my code below, what am i doing wrong?.. What i want to do is create a table like layout but using divs consisting of 5 rows and each row have 2 columns.

 <div id="column1" style="float:left;width:200px;">1st Title</div>
 <div id="container1" style="float:left;"> <asp:DropDownList ID="DropDownList1" runat="server"></asp:DropDownList></div>
 <div style="clear:both;"></div>
 <div id="column2" style="float:left;width:200px;">2nd Title</div>
 <div id="container2" style="float:left;"> <asp:DropDownList ID="DropDownList1" runat="server"></asp:DropDownList></div>
 <div style="clear:both;"></div>

Answer 1

Here is a CSS class that would make the problem all go away.

.clearfix:after {
    content: ".";
    display: block;
    height: 0px;
    clear: both;
    visibility: hidden;
}