Style Sheets
  Home arrow Style Sheets arrow Swapping Columns Using the Divine Ratio fo...
Dev Articles Forums 
ADO.NET  
Apache  
ASP  
ASP.NET  
C#  
C++  
ColdFusion  
COM/COM+  
Delphi-Kylix  
Design Usability  
Development Cycles  
DHTML  
Embedded Tools  
Flash  
Graphic Design  
HTML  
IIS  
Interviews  
Java  
JavaScript  
MySQL  
Oracle  
Photoshop  
PHP  
Reviews  
Ruby-on-Rails  
SQL  
SQL Server  
Style Sheets  
VB.Net  
Visual Basic  
Web Authoring  
Web Services  
Web Standards  
XML  
Mobile Linux 
App Generation ROI 
IBM® developerWorks 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us Get Paid 
Request Media Kit
Contact Us 
Site Map 
Privacy Policy 
Support 
 USERNAME
 
 PASSWORD
 
 
  >>> SIGN UP!  
  Lost Password? 
STYLE SHEETS

Swapping Columns Using the Divine Ratio for Web Page Layout
By: Alejandro Gervasio
  • Search For More Articles!
  • Disclaimer
  • Author Terms
  • Rating: 5 stars5 stars5 stars5 stars5 stars / 1
    2009-07-09

    Table of Contents:
  • Swapping Columns Using the Divine Ratio for Web Page Layout
  • Review: a liquid web page layout using the Golden Proportion
  • Swapping the positions of web page columns
  • Adding some structural markup

  • Rate this Article: Poor Best 
      ADD THIS ARTICLE TO:
      Del.ici.ous Digg
      Blink Simpy
      Google Spurl
      Y! MyWeb Furl
    Email Me Similar Content When Posted
    Add Developer Shed Article Feed To Your Site
    Email Article To Friend
    Print Version Of Article
    PDF Version Of Article
     
     
    ADVERTISEMENT


    Swapping Columns Using the Divine Ratio for Web Page Layout


    (Page 1 of 4 )

    If you’re a web designer who wants to learn how to create appealing and harmonious web page layouts by applying fundamental graphic design concepts like the “Golden Proportion” and “The Rule of Thirds,” keep reading. This is the third part in a series of articles that provides you with the right pointers to start implementing these principles for building aesthetically pleasant web sites.

    And now that I mentioned the Golden Proportion, you may recall that that in the last article of this series I demonstrated how to use this ratio to build a liquid web page layout. It was comprised of the typical header and footer sections, as well as two primary columns.

    Despite the simplicity of this particular example, the most important thing to notice here was the approach used for calculating the widths for each of the web page columns. These values were obtained by using the Golden Ratio. This proves that it is perfectly possible to apply this proportion when creating fixed designs or when working with liquid ones, even though this last case might be a bit trickier to implement in real world conditions.

    In addition, it's fair to stress that the layout developed in the previous article included a side bar positioned to the left of the web page and a content area, naturally located to the right side of the page. However, it's quite easy to swap the positions of the columns via CSS, while maintaining the same dimensions. Therefore, in this third installment of the series I'm going to explain how to do this very simply, which will hopefully give you a clearer idea of how to play a bit with your own web page designs based on the Divine Proportion.

    Now, it's time to get rid of the preliminaries and see how to build yet another appealing web page layout using the already familiar Golden Ratio. Let's get going!

    More Style Sheets Articles
    More By Alejandro Gervasio


       · This third installment of the series explains how to swap the positions of the...
       · Technically, wouldn't it be better to have the content div show up first in the...
       · In terms of accessibility, your appreciation is correct. From a semantic point of...
     

    STYLE SHEETS ARTICLES

    - Image Replacement CSS Techniques
    - Using BlueTrip`s Success, Notice and Error C...
    - More Uses for the Thin and Caps CSS Classes ...
    - Styling Definition Lists with the BlueTrip C...
    - Styling Unordered and Ordered HTML Lists wit...
    - Using the BlueTrip CSS Framework`s Thin and ...
    - Adding Borders to Web Page Columns with Blue...
    - Introducing the BlueTrip CSS Framework
    - Using a Background Grid to Assist Web Page L...
    - Extending the Rule Of Thirds for Web Page La...
    - A Two-Column Web Page Layout Based on the Ru...
    - Using the Rule Of Thirds for Web Page Layout
    - Swapping Columns Using the Divine Ratio for ...
    - Using the Golden Ratio in Liquid Web Page De...
    - Fundamental Design Principles for Web Page L...







    © 2003-2009 by Developer Shed. All rights reserved. DS Cluster 3 Hosted by Hostway
    For more Enterprise Application Development news, visit eWeek