HTML, Nested Div problem - html

Question

In my page I have three sections Header, Body and Footer.
In body I have three divs. First div includes another two small divs.
I wrote this CSS code:
#body_container{
margin: 10px 160px;
height: auto;
width: 100%;
clear: both;
border: 1px solid #3F0;
}
div.body_contents{
height: auto;
width: 74%;
float: left;
border: 1px solid #960;
}
div.sidebar{
height: auto;
width: 25%;
float: right;
border: 1px solid #F0F;
}
but when I check it, div is out of my frame. I gave 160px margin of left and right. what should i do?
Thanks

Answer 1

I hate using percentages since they depends on other things.
I usually do something with static values, like :
#body_container{
margin: 10px auto; /** The auto will make this div centered to the page **/
width: 1000px; /** suppose you want this width **/
clear: both;
border: 1px solid #3F0;
}
div.body_contents{
width: 748px; /** The width of the main part, -2px (for the border) **/
float: left;
border: 1px solid #960;
}
div.sidebar{
width: 248px; /** The width of the side bar, -2px (for the border) **/
border: 1px solid #F0F;
}
Of course, if you want the width of you main div to change regarding of the size of the browser (as it would be with your original CSS), my answer doesn't work.
But I would recommend you to NOT do a change of width based on the browser since it would change the organization of your page depending on the window.

Answer 2

That's simple, margin adds to the final rendered width of the element (that's 160 x 2 + 100% of parent's width, so it is overflow), so you may want to make it, for example, for the outer div, that width is 79%, and the left and right margin is 10% each (so total is 99%, 1% less to allow some room for borders, etc... although that's usually not how I do it)
example: http://jsfiddle.net/MKjwU/6/
one more thing: to clear the floats, you don't clear it like in your example...
either use an extra div, like this: http://jsfiddle.net/MKjwU/7/
or using this technique: http://www.quirksmode.org/css/clearing.html
see it at: http://jsfiddle.net/MKjwU/8/