Question

This is how i configured the divs in HTML

<div id="wrapper"><div id="content"><div id="details-middle" class="box">
..........content.........
</div></div></div>

And this the css for the div’s

#wrapper {
    border-radius: 12px;
font-size:13px;
line-height:140%;
width:1008px;
margin:0 auto;
    margin-top: 15px;
    margin-bottom:15px;

}
#content {
margin-left:20px;
width:1008px;
    }
#details-middle
{
float:left;
width:700px;

}
.box {border: 1px solid #CCC;
border-radius:12px;
margin-bottom:7px; 
padding:10px 12px;
background-color: #FFF;
}

Everything is showing out of the div’s ..

Answer 1

You are floating details-middle, which means non floated elements will not make room for it, unless they themselves are floated, or you clear the float.

My preferred solution is to give the parent overflow: hidden; which will force the parent to make room for its floated children:

#content
{
    margin-left:20px;
    width:1008px;
    overflow: hidden; /* change here */
}