Container not as tall as its content

[The Little Guy]

I have a div that is a container, and it is centered on the page, then I have have div's inside of it which are floated.

 

When I display it it displays weird...

 

I want that div to be below the white box. The white box is inside the container, and the container is only as high as the y position of the red box.

 

how can I make the container be as tall as its content?

 

Container:

#container{
margin:auto;
margin-top:40px;
min-height:200px;
width:800px;
position:relative;
}

 

Content:

.content{
float:left;
padding:10px;
width:100%;
clear:both;
background-color:#FFF;
-moz-border-radius:20px;
-webkit-border-radius:20px;
border-radius:20px;
-moz-box-shadow: 0 0 10px #000;
-webkit-box-shadow: 0 0 10px #000;
box-shadow: 0 0 10px #000;
}

 

[attachment deleted by admin]

[haku]

Add:

 

overflow:auto;

 

to the container.

[The Little Guy]

that worked, the only problem was that it cut off some of the content, and displayed a horizontal scrollbar