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 )
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.
Well, now that I've completely bashed absolute positioning, Iíll move on to the positive part of the article!