Hi, I'm having trouble understanding how floats work with the box model... I set up a sample page to illustrate what my problem is: http://attentioneering.com/sandbox/floattest.html.

I've got an outer div with a bunch of elements inside it that are floated to the left. Now I want to make the background colour of the div red, but it doesn't work! It's almost like the elements that are coded inside the div are flowing outside the div (if you look at the page with Firebug, you'll see that the div is there, but it's just a skinny line).

Can anyone tell me what's going on here?

Thanks for any tips!

Code:
<html>
<head><title>Sandbox Page</title></head>
<body>

<div class="outerbox" style="width:800px; margin: 0 auto; background-color:red;">

<div class="innerbox" style="float: left"><img src="http://icons.iconarchive.com/icons/giannis-zographos/dutch-football-club/256/Roda-JC-Kerkrade-icon.png"></div>
<div class="innerbox" style="float: left"><img src="http://icons.iconarchive.com/icons/giannis-zographos/dutch-football-club/256/Roda-JC-Kerkrade-icon.png"></div>
<div class="innerbox" style="float: left"><img src="http://icons.iconarchive.com/icons/giannis-zographos/dutch-football-club/256/Roda-JC-Kerkrade-icon.png"></div>
<div class="innerbox" style="float: left"><img src="http://icons.iconarchive.com/icons/giannis-zographos/dutch-football-club/256/Roda-JC-Kerkrade-icon.png"></div>
<div class="innerbox" style="float: left"><img src="http://icons.iconarchive.com/icons/giannis-zographos/dutch-football-club/256/Roda-JC-Kerkrade-icon.png"></div>
<div class="innerbox" style="float: left"><img src="http://icons.iconarchive.com/icons/giannis-zographos/dutch-football-club/256/Roda-JC-Kerkrade-icon.png"></div>
<div class="innerbox" style="float: left"><img src="http://icons.iconarchive.com/icons/giannis-zographos/dutch-football-club/256/Roda-JC-Kerkrade-icon.png"></div>
<div class="innerbox" style="float: left"><img src="http://icons.iconarchive.com/icons/giannis-zographos/dutch-football-club/256/Roda-JC-Kerkrade-icon.png"></div>

</div>

</body>
</html>