Плавающая таблица без таблиц

Question

Может кто-нибудь сказать мне, как выполнить этот макет с плавающей точкой и очищает? Я пытался в течение 2 дней с полным провалом

Answer 1

Должно быть довольно просто, это базовый макет из 2 столбцов с заголовком.

Что-то вроде этого должно работать нормально:

<div id="container">
 <div id="header">1</div>
 <div id="column1">
   <div>2</div>
   <div>3</div>
   <div>4</div>
 </div>
 <div id="column2">
   <div>5</div>
   <div>6</div>
 </div>
</div>

И немного базового CSS

#column1, #column2{
width:45%;
float:left;
}

Я привел здесь быстрый пример: http://jsfiddle.net/9DfRg/

Answer 2

конечно есть много решений. Можно было бы следующее:

HTML

<div id="wrapper">
  <div id="one">One</div>
  <div id="two">Two</div>
  <div id="three">Three</div>
  <div id="four">Four</div>
  <div id="five">Five</div>
  <div id="six">Six</div>
</div>

CSS

#wrapper {
    width:960px;
}
#one {
    width:100%;
    height:100px;
    background:#0C9;
}
#two, #three, #four, #five, #six {
    width:480px;
}
#two, #four, #six {
    float:left;
    height:100px;
}
#three, #five {
    float:right;
}
#three {
    height:200px;
}
#five {
    height:150px;
}
#two {
    background:#06F;
}
#three {
    background:#093;
}
#four {
    background:#699;
}
#five {
    background:#F06;
}
#six {
    background:#666;
}

живой пример: http://jsbin.com/iquyu5