Why are my floating point elements not in their parent

Question

So basically I have this div oberter, and all the elements inside it are floating elements. The only thing is that the border of the wrapper div does not include floating elements. Example:

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

heres 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 framed by the #wrapper border, but still aligned inside it, why is this?

Answer 1

You need to "clear" the div container.

Floating elements are not taken into account when calculating container sizes, however there are several workarounds to get what you want.

Simplest

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

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

@Pekka, ( ), SO:

'clearfix ?

Answer 2

point of float ,

, . overflow: hidden ( ).