Padding/margin-inclusive width setting?

Question

Basically I have a div that I want at 100% width. However, I also want it to have some padding. But when I add the padding, the width is added to it, meaning that my div now goes off-screen and there's a horizontal scroll bar.

Usually I compensate by just making the div a lower percentage (like 95%, or 90%).

I was wondering if there are any more elegant ways to handle this situation?

Answer 1

Have a look at box-sizing.

.example {
   -moz-box-sizing:    border-box;
   -webkit-box-sizing: border-box;
    box-sizing:        border-box;
}

Per default the width of an element is computed with regard to its content box. So an applied padding is added to the width. If you change the box model to border-box, the padding is included in the width. For compatibility have a look at caniuse.com

Answer 2

Try setting the padding to 5% and width to 90% (100-5x2)