CSS: Width in percentage and Borders

Question

I\'ve defined widths of the containers in percentage. I\'d like to add a border (3px on right side of a width), since container width is in % while the border width is in px

Answer 1

Use the box-sizing: border-box property. It modifies the behaviour of the box model to treat padding and border as part of the total width of the element (not margins, however). This means that the set width or height of the element includes dimensions set for the padding and border. In your case, that would mean the element's width and it's border's width would consume 30% of the available space.

Support for it isn't perfect, however vendor prefixes will catch most if not all modern browsers:

.left {
    width: 30%;
    border: 3px solid #000;

    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

More information can be found on the MDN and Quirksmode.

According to Quirksmode, using the 3 vendor prefixes above (-moz-, -webkit- and -ms-), you get support for all browsers, even IE8.