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