Поместите divs ниже float: left divs

Я пытаюсь создать сайт с базовой структурой:

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

3 divs float: left, чтобы быть на одном уровне. Тем не менее, их 5-й div (внизу) перемещается вверх до 3-х разделов в IE и отображается так же, как в Chrome, хотя содержимое находится ниже трех разделов.
Я думаю, что я просто сделал несколько ленивых кодировок здесь, но не знаю, как лучше.
У меня есть:

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

Результаты - верхняя, левая панель, фотография и верхняя 3 - средняя 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 на 3 средних div, но это не так, т с тех пор, как они меняются. Может быть, мне нужно это сделать, но по-другому?