Question

It’s been a while since I really dealt with percentages in web design. I have a nested DIV which sits inside a container but the padding of the container pushes it beyond the 100% width. Without wishing to embark on a process of trial and error to see what makes it as close to 100% of the width as possible, how do I go about achieving a snug fit? I also noticed that when I resized the window and made the space smaller, the right hand padding simply got smaller.

<div id="block">
    <div class="inside">ssdfsdfdfsfdf</div>
</div>

#block {
    width: 100%;
    background-color: #CCC;
    padding: 20px;
}
.inside {
    height: 200px;
    background-color: #333;
}

http://jsfiddle.net/AndyMP/cs2U9/4/

Answer 1

Use box-sizing css property for #block element.

#block {
    width: 100%;
    background-color: #CCC;
    padding: 20px;

    -o-box-sizing: border-box; /* Opera */
    -ms-box-sizing: border-box; /* IE */
    -moz-box-sizing: border-box; /* Mozilla */
    -webkit-box-sizing: border-box; /* Chrome, Safari */
    box-sizing: border-box;
}

About CSS box-sizing property: http://www.w3schools.com/cssref/css3_pr_box-sizing.asp