Does anyone get tired of calculating the total pixels of a div? (width+margin+padding+border)

Question

Does anyone get tired of calculating the total pixels of a div? Lets say you have 2 divs with width which fit perfectly in a parent div. changing only width, margin, padding, or border will mean that you have to calculate the div's pixels again. Is there a better way of using width, padding and margin? It's a good option to have a outer div which as width and an inner div for the padding and margin? Am I doing some unnecessary calculations?

Answer 1

If nothing needs to line up with anything else you can use percentages or ems or one of the other relative units.

Answer 2

If you avoid using padding as much as possible, it makes it easier because then you don't have to do a different set of calculations for each browser. (IE calculates differently than FF, IE does not include padding in width calculation)

Answer 3

Im sure the div soup nazis will get on I always use seperate divs if i need to use padding. In order to help mitigate this i only use padding when a margin just isnt acceptable for visual rendering reasons. I also dont generally use relative measurements for anything but typography.

Answer 4

You're familiar with the two box models right?

W3C box model: width + padding + border == outerwidth
Microsoft box model: width - padding - border == contentwidth

The Microsoft one (in IE5 and IE6/Quirksmode) makes so much more sense because it allows you to vary the padding and border without changing the overall width. No arithmetic needed. Unfortunately the W3C version won out in the end, but you can still get the benefit of the Microsoft box model by using nested DIVs.

So yes, to answer your question, an outer DIV with width and an inner DIV with padding is a good idea if:

1. You hate doing arithmetic
2. You're supporting IE6 in Quirksmode