Вам нужна разметка вроде:

<div class="main">
    <div class="topRow">Major column</div>
    <div class="leftCol">C1</div>
    <div class="rightCol">C2</div>
<div>

А затем несколько CSS для их размещения:

div.topRow {
  width:100%;
  clear:both;
}
div.leftCol {
  width:50%;
  float:left;
}
div.rightCol {
  width:50%;
  float:right;
}

Я бы рекомендовал их в контейнере div, если он используется для макета.

HTML:

<div> full width </div>
<div class="column50"> left </div>
<div class="column50"> right </div>

CSS:

div.column50 {
    float: left;
    width: 50%;
}

В случае, если это неясно, нет необходимости создавать два отдельных класса CSS для этого случая. Оба последних двух блока имеют ширину 50%, без полей и отступов. Установка для них ширины 50% и левого поплавка имеет тот же эффект, что и установка правого с правым поплавком.

Все вышеперечисленное будет работать, но имейте в виду, что элементы будут «ускользать» из родительского div в IE6. Это неприятно, но большинству людей все еще стоит задуматься о поддержке IE6.

Решение экранирования - присвоить содержащему элементу высоту или ширину (подойдет любой, он растянется, чтобы соответствовать, поэтому обычно 1% составляет то, что я использую.).

Кроме того, при установке ширины помните, что любые границы или поля, которые вы устанавливаете, имеют значение в дополнение к ширине элементов, поэтому, если вы установите два div на 50% с рамкой или полем вы получите разрыв строки.