I just became aware of the awesomeness of
box-sizing: border-box CSS property. If you set that then then any padding or border specified on an element is laid out and drawn inside this specified width and height, instead of outside the specified width and height as normal CSS 2.1's traditional box model works.
Previously, we had a giant warning comment not to touch the padding on any columns because it would cause way too much math to be needed. Seriously. To make the math much simpler, we always put an "inner" div inside the column's div so that a border or padding could be added there instead. This made the markup fatter than ideal.
So can we use this everywhere? http://caniuse.com/css3-boxsizing says the only sore spot is IE7 and lower. However… now that we have the
.ie6 classes available to us in Zen 7.x-5.x, we can compensate for that.