Using CSS for layout, clearing float for stating on next line ?? Need to create a layout of 2 cols and 5 rows

I have created a layout using DIVs rather than tables. It开发者_Go百科 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>

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

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

Why don't you use display attribute rather than float, e.g. (you'll need to group your divs within divs with class "row"):

.row {
    display: table-row;
}

#column1, #container1, #column2, #container2 {
    display: table-cell;
}

I'm pretty sure you can get the same effect by adding clear: left to your column divs and clear: right to your container divs.

Edit: In fact, I would expect that the clear:left in the columns would be enough, but if that was true, making table-like layouts using floats would be easy, and it never is.