div'ы лесенкой

[x2er0]

Есть код:

<!--area bigleft-->
<div id="area_bigleft">
 
<div class="sec1">
    вапыпывпваып выап вып sdg dsgds gdsf gdsfg выап выапавп вып
</div>
<br>
<div class="sec2">
    впваып вып вып выапыв апваып dfsg выап вып выап выап выап выпвыап sdg
</div>
<br>
<div class="sec3">
    вап вып выап выпв sfgdsf gdsfg выап вып вып выа
</div>
 
</div><!--end of area bigleft-->

И есть стиль:

/* area left */
#area_bigleft {
    float: left;
    width: 650px;
    padding: 10px 10px;
    font-size: 11px;
}
 
#area_bigleft .sec1{
width: 33%; background-color: green; float: left;
}
#area_bigleft .sec2{
width: 33%; background-color: blue; float: left;
}
#area_bigleft .sec3{
width: 33%; background-color: red; float: left;
}
/* area_bigleft */

Почему колонки идут лесенкой относительно друг друга и как это поправить, прижав кверху?

[AVA12]

Это из-за <br> между div-ами (зачем они вообще нужны?) Из-за них обертка содержит три пустые строки текста, каждый блок рисуется на уровне очередной строки.

[Sunny]

Потому что параметр float делает элемент обтекаемым другими элементами. Для исправления используй параметр clear со значением both.