Home arrow Style Sheets arrow Using Relative Positioning For Consistent Layout

Using Relative Positioning For Consistent Layout

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!

Author Info:
By: Justin Cook
Rating: 4 stars4 stars4 stars4 stars4 stars / 31
June 23, 2005
  1. · Using Relative Positioning For Consistent Layout
  2. · Relative Positioning Explained
  3. · A Basic Web Page
  4. · Now thatís Style!

print this article

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.

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!

blog comments powered by Disqus

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials