Are there any math rules for creating a fluid CSS template without borders overlapping?

I'm creating a template for a page (you can see it here) and I'm trying to use proportional height and width. I'm having troubles with borders. I think there is some math calculation to do because I want to have pixel perfect borders for each div (that means that two adjacent divs should be separed only by a 1px border) and all divs contained in a container div should use all the available space (I hope you understand what I mean).

开发者_StackOverflow社区

You can find the source code here

Thx in advance for any suggestions on how to achieve this.

---

So you will have to modify your HTML and your css a bit to achieve such a result. Elements with a width of 50% and a 1px border will be larger than 50% in the box model. So wrap your contents in another div and give that div the border. the outer div should get the 50% width. Also use only top and left borders.

I've modified the left part of your fiddle to give you an impression how it could work.

http://jsfiddle.net/3PW7y/2/