css - How come my float elements aren't within their parent

Question

So basically i have this wrapper div, and all the elements inside it are floated elements. Only thing is the border of the wrapper div does not include the floated elements in it. Example:

<div id = "wrapper>
   <div id = "content"></div>
</div>

heres the css:

#wrapper
{
   width:         1000px;
   margin-left:   auto;
   margin-right:  auto;
   border:        1px solid;
} 

#content
{
   border:        1px solid;
   width:         850px;
   height:        400px;
   display:       block;
   float:         left;
}

Basically #content is not enclosed within #wrapper's border, but still aligns within it, why is this?

Answer 1

You need to "clearfix" the container div.

Floated elements are not considered when calculating the dimensions of a container, however there are several workarounds to get what you want.

The Simplest

Just add a div like this one as the last child in your container div:

<div style="clear:both"></div>

As @Pekka comments there are many other ways to achieve the effect (without extra markup) listed in this SO question:

What methods of ‘clearfix’ can I use?