플로팅 테이블없는 레이아웃

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