Simple css problem

hello - i have a div, and im filling it with divs which float left, so they stack 2 by 2. How do I enable the container div to ‘fill’ itself, rather than let the floats just overflow themselves!?

<div class="a">
  <div class='b'/>
  <div class='b'/>
  <div class='b'/>
</div>

css is


.a{
width:1000px; margin:0 auto;
background:red;
}
.b{
float:left;
width:500px;
height:100px;
}

so the divs stack - but there’s no filling red background. I thought putting ‘clear’ into .a would work but it does nadda. help yo?