看跌的div：左div的

Question

我想擁有一個具有基本結構的部位：

<1 div> 
<3 divs next to each other> 
<1 div> 

3周的div有浮動：左，以使在同一水平。然而，他們的第5個div（在底部）有點類似於IE中3個div的頂部，並且在Chrome中表現出來，儘管內容低於3個div。
我想我在這裏只是做了一些懶惰的編碼，但並不知道更好。
我目前有：

<div id="results"> 
<!-- Ajax Content Here --> 
</div> 
<div id="leftpanel"> 
</div> 
<div id="photo"> 
</div> 
<div id="top3"> 
</div> 
<div id="voting"> 
</div> 

結果是最上面的一個，leftpanel，照片和TOP3屬於中3，而投票是低於3
基本CSS是：

#leftpanel { 
float:left; 
width:20%; 
height: 600px; 
} 

#top3 { 
float: left; 
width:20% 
} 

#photo { 
width: 60%; 
float:left; 
text-align: center; 
} 

#voting { 
width: 500px; 
height: 250px; 
text-align: center; 
margin-left: auto; 
margin-right: auto; 
} 

#results{ 
width: 300px; 
height: 20px; 
margin-left: auto; 
margin-right:auto; 
margin-bottom: 5px; 
text-align: center; 
} 

我敢肯定這是我做的傻事，所以任何輸入都非常感謝，我可以用來學習如何正確地做到這一點:)我以前有一個包含在三個中間div div，但沒有因爲內部變化大小的工作。也許我需要這樣做，但採取不同的方式？

Answer 1

，而不是花車工作，你可以考慮簡單地設置中間的div爲「inline-block的」的顯示屬性。請記住，默認情況下，div元素具有塊顯示，這意味着即使寬度小於父寬度，它們也會佔用其父元素的整個寬度。另一方面，嵌入塊像拼圖塊一樣拼裝在一起，並且水平流動而不是垂直流動。我認爲這會讓你的代碼比處理浮動數據更加乾淨。這裏有一個演示：

http://jsfiddle.net/scMFC/

Answer 2

將clear: both加到底部div，所以它不會受浮動其他div的影響。

Answer 3

您需要清除浮動。如果#voting是你的第五個div在你的CSS中添加這個。

#voting{clear:both}

應該做的伎倆