Set div outerwidth using css

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

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).

Related