Mettre les divs ci-dessous float:left divs

J'essaie d'avoir un site qui a la structure de base:

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

Les 3 divs sont float:left afin de faire être sur le même niveau. Cependant, ils 5ème div (en bas) en quelque sorte se déplace vers le haut de la 3 divs dans IE, et montré que, comme dans Chrome, même si le contenu est en dessous de la 3 divs.
Je pense que j'ai juste fait un peu paresseux de codage ici, mais ne savez pas vraiment mieux.
Je suis actuellement a:

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

Les résultats est le plus haut, leftpanel, photo et top3 sont le moyen de 3, alors que le vote est en dessous de la 3.
CSS de base est :

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

Je suis sûr que c'est quelque chose de stupide, je suis en train de faire, de sorte que toute entrée est appréciée, je pourrais l'utiliser pour apprendre à le faire correctement 🙂 j'avais déjà un div contenant sur les 3 du milieu de la vrd, mais cela n'a pas fonctionné depuis le changement de taille. Peut-être que j'ai besoin de le faire, mais d'une manière différente?

OriginalL'auteur Joseph Duffy | 2011-10-13