CSS clearing an entire row

programming web dev
1

I uploaded a small test page: http://fritz.planet.ee/test.html


<html>
<head>
<title>Test page</title>
<style type="text/css">
.container{
 float:left;
 margin-right:10px;
 width:90px;
 background-color:#FFCC33;
 margin-bottom:10px;
}
</style>
</head>
<body>
<div style="width:300px; background-color:#CCCC66; overflow:hidden;">
 <div class="container">first<br />first</div>
    <div class="container">second<br />second<br />second</div>
    <div class="container">third</div>
    <div class="container">fourth</div>
    <div class="container">fifth</div>
    <div class="container">sixth</div>
    <div class="container">seventh</div>
</div>
</body>
</html>

This is unfortunately not the effect i’m aiming for. I would like to achieve something like this:

Simply applying “clear:both” doesn’t help… anyone have ideas how to do this ?

Thanks a lot.