Converting a site to Web standards can be quite a struggle. It’s difficult enough to achieve a satisfying layout with positioning, floating, and all that. But it’s downright frustrating to realize that the positioning you’ve chosen doesn’t render consistently in different resolutions, or even multiple browsers in the same resolution! Well, take heart; this article will explain why relative positioning is a trustworthy friend in this case!
Using Relative Positioning For Consistent Layout (Page 1 of 4 )
Introduction
The future of Web design can more or less be summed up in two words: Web standards. If you’re not yet sure of what that means, or you’re not convinced that compliance is worth the up-front effort, then please take a look at this article before going any further: http://www.devarticles.com/c/a/HTML/W3C-Web-Standards/. If you’ve already taken the plunge into table-less page layout and design, then no doubt you’re experiencing no small amount of frustration! No worries, this article will help.
Problems with Absolute Positioning
Obi-wan states that only the Sith deal in absolutes, and I agree with him entirely in this case. Absolute positioning is almost pure evil for a Web designer. The first time I tried to convert a site to Web standards, I used the seemingly simple absolute positioning. The beauty of this is that you could even drag your page elements around in a WYSIWYG HTML editor, and achieve the perfect desired layout instantly. But there is some ugliness inherent in absolute positioning.
As I mentioned, it’s easy to configure the layout and display your site perfectly on your computer. But that’s where the easiness ends. Try rendering your site on another computer with a different screen resolution. Chances are the site is slightly or extremely different than you designed. Even if you the same resolution, but a different browser, you’ll see minor and sometimes major variations.
The only possible way to manage this would be create separate style sheets for each standard resolution (currently there are more or less five common resolutions). Then you’d need a JavaScript include file to dynamically detect the screen size, and try to load the closest appropriate style sheet. The potential fail points here are numerous, and the amount of work to maintain five or more style sheets is ridiculous. And of course, if you have dynamic content on your site, this introduces another variable in the rendering, virtually impossible to design for with absolute positioning.
Well, now that I've completely bashed absolute positioning, I’ll move on to the positive part of the article!
Style Sheets 
/ 18 
HTML5 Boilerplate Introduction
