DIV zamieszczam poniżej pływaka: lewy div

Question

Próbuję mieć witrynę, która ma podstawową strukturę:

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

The 3 div są float: lewo, tak aby być na tym samym poziomie. Jednak 5-te div (na dole) to ruchy na górę 3 elementów div w IE i wyświetlane w Chrome, chociaż zawartość jest poniżej 3 elementów div.
Myślę, że właśnie zrobiłem tutaj trochę leniwego kodowania, ale tak naprawdę nie znam nic lepszego.
Ja obecnie mam:

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

Wyniki jest górna, leftpanel, zdjęcia i top3 są środkowa 3, podczas gdy głosowanie jest poniżej 3.
podstawowe CSS jest:

#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; 
} 

Jestem pewien, że to coś głupiego robię, więc wszelkie dane wejściowe są bardzo cenne, mogłem użyć, aby dowiedzieć się, jak to zrobić poprawnie :) Poprzednio miałem div zawierający 3 środkowe divy, ale to nie pracować, ponieważ te wewnątrz zmieniają rozmiar. Może muszę to zrobić, ale w inny sposób?

Answer 1

Zamiast pracować z pływaków, można rozważyć po prostu ustawiając atrybut wyświetlania środkowych div do „inline-block”. Pamiętaj, że domyślnie elementy div mają wyświetlacz blokowy, co oznacza, że ​​zajmują całą szerokość elementu nadrzędnego, nawet jeśli jego szerokość jest mniejsza niż szerokość nadrzędna. bloki inline z drugiej strony pasują do siebie jak puzzle i płyną w poziomie zamiast w pionie. Myślę, że to spowodowałoby, że twój kod byłby znacznie czystszy niż radzenie sobie z floatami. Oto demo:

http://jsfiddle.net/scMFC/

Answer 2

dodaj clear: both do dolnego elementu div, aby nie wpływał na pływające inne elementy div.

Answer 3

Musisz wyczyścić pływaki. Jeśli #voting jest twoim piątym div dodaj to w swoim css.

#voting{clear:both}

powinno wystarczyć