divs pongo a continuación float: left divs

Question

estoy tratando de tener un sitio que tiene la estructura básica:

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

Los 3 divs son float: left con el fin de hacer que estar en el mismo nivel. Sin embargo, el quinto div (en la parte inferior) se mueve hasta la parte superior de los 3 divs en IE, y se muestra así en Chrome, aunque el contenido está por debajo de los 3 div.
Creo que acabo de hacer algunos códigos perezosos aquí, pero realmente no sé nada mejor.
He Actualmente tengo:

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

El resultado es el de arriba, leftpanel, foto y top3 son el medio 3, mientras que la votación está por debajo del 3.
CSS básico es:

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

Estoy seguro de que es algo tonto lo que estoy haciendo, por lo que cualquier aportación es muy apreciada, podría utilizar para aprender a hacer esto correctamente :) Anteriormente tenía un div que contiene los 3 divisores centrales, pero esto no trabajo ya que los que están dentro cambian de tamaño. Tal vez necesito hacer esto, ¿pero de una manera diferente?

Answer 1

En lugar de trabajar con los flotadores, es posible considerar simplemente establecer el atributo de visualización de los divs medias a "inline-block". Recuerde que, por defecto, los elementos div tienen una visualización de bloque, lo que significa que ocupan todo el ancho de su elemento principal, incluso si su ancho es inferior al ancho principal. los bloques en línea, por otro lado, encajan como piezas de rompecabezas y fluyen horizontalmente en lugar de verticalmente. Creo que esto haría tu código mucho más limpio que tratar con flotadores. He aquí una demostración:

http://jsfiddle.net/scMFC/

Answer 2

agregue clear: both al div inferior, para que no se vea afectado por los otros divs flotantes.

Answer 3

Tienes que despejar los flotadores. Si #voting es su quinto div, agregue esto en su css.

#voting{clear:both}

debe hacer el truco