html - how to stop overflow of div with 100% width

Question

I have this example and I need to stop the blue div from overflowing (respect the padding), but I need 100% width.

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

#container{
    width: 400px;
    display: block;
    padding-left 50px;
    border : solid 1px brown;
    min-height: 400px;
    background: green;
}
#content {
    margin-left: 50px;
    margin-right: 50px;
    min-height: 200px;
    width:100%;
    background: blue;
}

pls how could I do that.

Answer 1

如果您不设置内容的宽度，我认为一切都如您所愿？

http://jsfiddle.net/PPYQQ/

#container {
    width: 400px;
    display: block;
    padding-left 50px;
    border : solid 1px brown;
    min-height: 400px;
    background: green;
}

#content {
    margin-left: 50px;
    margin-right: 50px;
    min-height: 200px;
    background: blue;
}

请注意，您不能同时拥有它——孩子不能既是 400px + 100px 填充，也不能填充大小为 400px 的父代。