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

Question

Может ли кто-нибудь сказать мне, как выполнить этот макет с поплавками и очистить? Ive пытался в течение 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