佈局構建 - div元素不aligining

Question

我試着去建立一個佈局...第3個容器正在顯示預期.. 我想沿着container1，container2的一側顯示的容器4，容器

RequirementL
容器4應顯示旁邊（Container1 + 2 + 3）

撥弄： http://jsfiddle.net/prem1980/39rJd/1/

HTML

<div id="main-container"> 
    <div id="container1"> 
     container-1 
    </div> 
    <div id="container2"> 
    </div> 
    <div id="container3"> 
    </div> 
    <div id="container4"> 
     container 4 
    </div> 

</div> 

CSS

html, body{ 
    height: 100%; 
    width:100%; 
    /*background-color:#AFEEEE;*/ 
    background-color:grey; 
} 

#main-container { 
    height:100%; 
    width:100%; 

    /*margin:10px 10px 10px 10px; */ 
} 

#container1 { 
    height:60%; 
    width:30%; 
    margin:10px 10px; 
    background-color:green; 
    float:left; 
    clear:both; 
} 

#container2 { 
    height:20%; 
    width:30%; 
    margin:10px 10px; 
    background-color:yellow; 
    float:left; 
    clear:both; 
} 

#container3 { 
    height:20%; 
    width:30%; 
    margin:10px 10px; 
    background-color:red; 
    float:left; 
    clear:both; 
} 

#container4 { 
    height:100%; 
    width:30%; 
    margin:10px 10px; 
    background-color:orange; 
    float:left; 

} 

Answer 1

你想要創建兩列，對吧？頂部的#container-4應與#container-1的頂部對齊。

爲此，您需要創建一個圍繞#container-1,#container-2和#container-3的包裝div。然後，您也可以放棄這三個div的浮動，清除和寬度。

HTML

<div id="main-container"> 
    <div id="container123"> 
     <div id="container1"> 
      container-1 
     </div> 
     <div id="container2"> 
      container-2 
     </div> 
     <div id="container3"> 
      container-3 
     </div> 
    </div> 
    <div id="container4"> 
     container 4 
    </div> 
</div> 

CSS：

#container123 { 
    float: left; 
    width: 30%; 
    height: 100%; 
    margin: 0 10px; 
} 
#container1 { 
    height:60%; 
    margin:10px 0; 
    background-color:green; 
} 
#container2 { 
    height:20%; 
    margin:10px 0; 
    background-color:yellow; 
} 
#container3 { 
    height:20%; 
    margin:10px 0; 
    background-color:red; 
} 
#container4 { 
    height:100%; 
    width:30%; 
    margin:10px 10px; 
    background-color:orange; 
    float: left; 
} 

檢查updated Fiddle

[編輯] 如果你不需要#main-container，你可以刪除它，檢查the fiddle。

Answer 2

您是在容器4人失蹤clear:both：

#container4 { 
    height:100%; 
    width:30%; 
    margin:10px 10px; 
    background-color:orange; 
    float:left; 
    clear:both; 

} 

Updated JSFiddle

Answer 3

添加clear:both到.container4

Updated Fiddle

Answer 4

添加到您的＃container4：

position:absolute; 
top:8px; 
left:35%;