How do I keep containing box from collapsing

[ErikSean]

Hi ... I've been around the web a long time but I've not done much with client side, and when I have I've certainly not used CSS for layout. I'm trying to learn and break my bad habits.

I have a bunch of divs floated in a parent div. The parent div, containing only these floats, collapses and doesn't visually surround the floated divs anymore. Is there a way to prevent this?

The HTML is roughly:

<div id="container">
 <div class="box"> x </div>
 <div class="box"> y </div>
 ...
</div>

With CSS of:

#container {
 border: 3px black solid;
 padding: 20px;
}
.box {
 float: left;
 width: 20%;
}

[swa66]

Many options, just a few:

Add something (eg a <br /> )after the floats that is not floated, clears the floats and is in the parent.

Alternatively, search for "clearfix" but beware of the many hacks in many examples you'll find that aren't really needed.