Put divs below float:left divs

Question

I'm trying to have a site that has the basic structure:

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

The 3 divs are float:left in order to make be on the same level. However, they 5th div (at the bottom) sort of moves up to the top of the 3 divs in IE, and shown like that in Chrome, although the content is below the 3 divs.
I think I've just done some lazy coding here, but don't really know any better.
I've currently got:

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

The results is the top one, leftpanel, photo and top3 are the middle 3, whilst voting is below the 3.
Basic CSS is :

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

I'm sure it's something silly I'm doing, so any input is much appreciated, I could use to learn how to do this properly :) I previously had a containing div on the 3 middle divs, but this didn't work since the ones inside change size. Maybe I need to do this, but in a different way?

Answer 1

add clear: both to the bottom div, so it won't be influenced by the floating other divs, but will move down below them.

Answer 2

Rather than working with floats, you might consider simply setting the display attribute of the middle divs to "inline-block". Remember that be default, div elements have a block display, which means that they take up the entire width of its parent element, even if its width is less than the parent width. inline blocks on the other hand fit together like puzzle pieces and flow horizontally rather than vertically. I think this would make your code much cleaner than dealing with floats. Here's a demo:

http://jsfiddle.net/scMFC/

Answer 3

You need to clear the floats. If #voting is your fifth div add this in your css.

#voting{clear:both}

should do the trick