I'm not sure how much I can contribute, but...
This goes for people who are, by any reason, forced to work around fixed-size layouts: Never forget how much room are you drawing.
Sizes specified in CSS, for the "left", "top" and other attributes, do not take into consideration any property like margin or padding. This:
Is not a 200x200 square! Heck it's not evena square to bgin with... It's a 202x206 box. Basically, you have, from the outside to the inside: outline, border, margin, padding and content. The corresponding properties are outline-? (which I think only FF supports, most other browser support just outline), border-?, margin-?, padding-?.
border: 2px solid silver;
So to determine the real size of a container you must add the relevant tags. In the above example, since I use height 200, 2 extra pixels for border in all directions, and 4 extra pxs for padding, I have a grand total of 206px.
Outline and Border are not considerer for positionning, but they still take part of the layout and filling procedure, so if you don't pay attention you'll find your design boxes wildly overlapping. I have seen too many basic fixed-container models fail because of this.
Because no matter what the ladies say, size does matter: remember the difference between CSS measurement units!
1px is one pixel in the client's screen, just that.
1pt is defined by the client size's video card to be the equivalent to 1/72 inch, so the size of a pt varies according to the available monitor information. Since you can not always know how big a monitor is (the resolution does not translate to real-world measurement), absent from using "pt" measurements to achieve anything that has to do with scaling text.
Also remember that if you don't define header (H1..H5) sizes, the browser will do it instead by using pt as a measurement. If I am not wrong, for example, Opera ships with default normal text size 12pt and default heading (H1) text size as 18pt, whereas Firefox ships with default normal text size 12pt and no default heading (H1) size.
Use "pt" for printer-friendly stylesheets (a "print.css" file) or when you ant screen-independent measurements (to create a on-screen ruler, for example).
1mm is 1mm. 1/1000th of a meter. It is defined by the client side's computer as described above. It has not much use.
1in is defined to be one inch in the same way as above (thsi is, client-side).
1em is the width-size of the letter "m" (hence the name) according to the parent block element (eg.: a DIV)'s font-size property.
Similarly, 1ex is the height of a letter "x" (hence the name) according to the parent block-element.
There's also "%", to achieve exact scaling with respect to a parent element. If you define this stylesheet:
, you are guaranteed to get double size in a SPAN class="double-size" with regards to the parent:
The SPAN inside the header is guaranteed to be 8em high, whereas the span inside the paragraph is guaranteed to be 24pt high, as long as you haven't defined a font-size for the <p> tag...
<h1>Relative <span class="double-size">size</span> Demo</h1>
<p>Hello, this is some <span class="double-size">large text</span>
I came up with for this demonstration.</p>
To finish, some last words: first: denounce IE, or at least IE6, as much as you can. Join a campaign like that of Savethedevelopers.org. Second: pay attention to CSS3 specs' evolution, but don't drool nor overwork yourself for them. Rounded corners may be a nifty thing, and text columns certainly help to the readability of long passages, but everyone is doing them so differently (or not doing them at all) that if you try to listen to people's complains you'll never cease overworking stuff, trying to modify the CSS and patching content (hint hint sin sin) to suit all droolers! CSS3 is still very far away (it's managed by a committee after all) so don't get your hopes high.