HTML CSS Box with padding and margin and 100% width? [duplicate]

Answer 1

You should use CSS box-sizing property:

#box {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    margin: 0;
}

But please note that you will need to use zero margin for this to work.

There is a good explanatory article on how this works: http://css-tricks.com/box-sizing/

With CSS3, you can replace border with inset border-shadow and margin with transparent border. This way you will have control of all of these parameters: padding, (fake) margin and border:

#box {
    width: 100%;
    height: 100%;
    padding: 15px;
    border:20px solid transparent;
    box-sizing:border-box;
    -webkit-box-shadow: inset 0px 0px 0px 5px #f00;
    box-shadow: inset 0px 0px 0px 5px #f00; 
    -moz-box-sizing:border-box;
}

See a live fiddle here: http://jsfiddle.net/HXR3r/