Welcome to My em Demo

The above nav is sized in ems to allow the page to scale correctly.

The nav above is sized in ems and if you resize the text from the browsers controls then the layout will remain intact and scale accordingly. There may be the odd pixel discrepancy due to rounding errors with ems but I can live with that because overall the layout maintains complete integrity whether you scale right up or right down (within reason). The page may also be a slightlty different size in some browsers but again I don't see that as an issue.

If the layout was constructed in pixels then the menu would soon break out of the container and upset the rest of the layout. Of course IE6 and under won't scale pixel font sizes so they would not have resized at all and it would be very bad for accessibility.

The above demo has a container with a width set in ems so the layout can expand horizontally but it also avoids setting fixed pixel heights on elements also. Therefore the elements can grow as required and not break their parent containers. You could of course size the height of elements in ems to maintain integrity where exact measurements need to be made but best results are obtainable if you left the height be dictated by content.

If the wrapper on this page was set in pixels then the layout would still hold up quite well when resized due to the way that the nav was constructed without setting heights or widths and letting content dictate how big each element should be.

With a little thought even pixel sized layouts can be made to behave better but best results are found using the techniques as in the nav above.

Welcome to My pixel Demo

The above nav is sized in pixels but the fonts are still relative.

The above layout uses pixels for measurement but I have left the font size relative to show what happens when the text is resized in IE. Of course other browsers would resize the text anyway so the effect is similar in those browsers.

Re-size this page up about three times in firefox and then compare the differences between the em nav and the pixel nav and then decide which one your visitors would like best.

To be honest the display isn't actually that bad for the pixel version but the layout is very simple and if we mixed in some other floats and a few absolute elements then things would start to get a lot worse very quickly.

In ie6 the picel display is quite reaonable due to the fact that IE doesn't understand width and height correctly and will scale the parent elements to accomodate the larger text. This won't be true in ie7 though.

Note: I have not bothered to accomodate any box model hacks as this is only demo, so only view in ie6 or higher.