Using Relative Positioning For Consistent Layout

(Page 1 of 4 )

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!

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!

Next: Relative Positioning Explained >>
 

More Style Sheets Articles
More By Justin Cook

Comments On: Using Relative Positioning For Consistent Layout

· I appreciate what you tried to achieve here, but if you want to write this kind of...    · I too appreciate what you've tried to achieve, that is shameless self...    · [quote]I too appreciate what you've tried to achieve, that is shameless self...    · If you really are a writer here, I'm quite surprised that you would post these...    · I think there's another way of design web pages that use absolute positioning (thus...    · Absolute positioning means absolute to the page. I don't believe that method would...    · Great explanation of CSS relative positioning. You isolate the problem at hand and...    · "But it's downright frustrating to realize that the positioning you've chosen...    · Clear and simple, they way few in the industry can keep things.You saved my...    · I'm not sure what this author was trying to achieve. This is not a flexible layout,...   >>> Post your comment now!