Creating Columns
How Precise
I once asked a SE how precise relative values could be when creating columns on a web page. YES!! It was a FOOL's ERRAND.
To answer the question I'll provide the actual CSS used to create the 4 columns on the front page.
The combined widths of nested divisions or all adjacent divisions must not exceed 100% of available space.
If you add padding or margins, you must subtract their values from the width of that division or from the width of an adjacent division.
Beginners will run into problems getting adjacent divisions to line up side by side.
If you can master this concept, you can master the art of building web pages.
Everything you add to a division, margins, padding and even box-shadow and borders, adds to its size.
Oh, and I guess you could say 20.875% and 2.166% is pretty precise.
The Math: 20.875 X 4 + 5 +5 + 2.166 X 3 = 99.998
Examples
CSS 4 Columns on front page: div.left { width: 20.875%; padding: 0 0 ; margin: 0 2.166% 0 5%; float: left; }
div.inner-left { width: 20.875%; padding: 0 0 ; margin: 0 0; float: left; }
div.inner-right { width: 20.875%; padding: 0 0; margin: 0 2.166% 0 2.166%; float: left; } div.right { width: 20.875%; padding: 0 0; margin: 0 5% 0 0; float: left; } Margins are defined as: margin : top right bottom left