A better way (or alternative) to calculate Pixel and % in CSS?

Question

I'm not saying that I'm lazy to do math, but is there a better way to perform this task: I have a page that with width: 960px, inside it has 2 divs that are width: 50%. That's quite simple, but if I want to add 1px border I have to calculate 960/0.5 minus the extra pixels of the borders, they should be 4px but strangely they are counted as 2px (left and right side of 2 divs right?). Also, when I add margin and padding I have to calculate everything again. Lets say I add 10px margin, I have to convert the % to px and sometimes it gives me annoying numbers like 760.25px. I would like to know if you are using a better approach or if its unnecessary to do it like this. Thanks.

Answer 1

box-sizing CSS property (if you dont care about IE<8)

Answer 2

If you use fixed width of the container, why would you use % for inner DIV's. It does not make any sense unless you use percents. Sure you can use box-sizing, but it will hurt older browsers.

Answer 3

If your "divs" have a background image, you can hack by integrate the border in the background image.

But if your "divs" have a fixed width, you should calculate width in order to have no surprises with other web-browsers.

Answer 4

You can add more elements for sizing:

<div style="width:960px;overflow:hidden;">
  <div style="float:left;width:50%;">
    <div style="margin:5px;border:1px solid #000;padding:5px;"></div>
  </div>
  <div style="float:left;width:50%;">
    <div style="margin:5px;border:1px solid #000;padding:5px;"></div>
  </div>
</div>

You can use percentages for element with no margin, border or padding, and you can use margin, border and padding on the elements inside that has auto width.