Setting the border values on a fixed width container

Lets say you were setting a 960px wide fixed width div for a webpage, and you want a 1px border on the left and right.

Would you include the border in the specified width for the div (so excluding the border the content area is actually 958px wide), or would you add 2 extra pixels to accomodate the border, giving you a 962px wide box?

I agree with samanime. It really does depend on your project and there is nothing wrong with using either method as long as you are consistent. That being said I most often end up subtracting. coming from a Graphic design background… it is difficult if not impossible to anticipate padding , margins and border values, so a lot of the web comps done in Photoshop are done based on the actual fixed width of the container.

Lets say for exampel I made a background to create 2 faux columns in a 960px page. In PS I would most likely make a 960px document, and draw the area of the two colums as expected in width… lets say 600px and 300px (20px in between and 20px from each edge)… that adss up perfectly in PS…

But if you used that bg in a DIV that had width:960px AND padding:0 20px things wont line up… so you subtract the sides(960-20-20) width:920px and everything works.

Thats one scenario to give you an idea of when one method can be preferable over the other

It depends on your project.

Generally when I’m measuring things out, I’ll get the determine the final width of an element then start subtracting things. For example, if I’m making a div with a final width of 600px, 10 padding on either side, and a 2px border on either side, I’d subtract 600 - 10 * 2 - 2 * 2 = 600 - 20 - 4 = 576 which is what I’d set the width to.