Set div outerwidth using css

Question

I wonder if there is way to set outerwidth of a div using css to ignore padding and borders.

When I set a div to be 50% width, padding and border will be added to the width. How can I solve that without javascript or jQuery.outerWidth() ?

Don't want to use an extra element

Answer 1

I'm wonder if there is way to set outerwidth of a div using css to ignore padding and borders.

You can use box-sizing: border-box to make padding and border be counted inside width:

div {
    box-sizing: border-box;
}

See: http://jsfiddle.net/thirtydot/6xx3h/

Browser support: http://caniuse.com/css3-boxsizing

The spec: http://www.w3.org/TR/css3-ui/#box-sizing

Answer 2

Nest another div inside yours, and apply the paddings/borders to the nested one:

<div style="width:50%;"> <div style="padding:5px;">  ....  </div> </div>

Unfortunately, there is no purely CSS way to achieve that (or at least I'm not aware of one).