Home arrow Style Sheets arrow A Two-Column Web Page Layout Based on the Rule of Thirds

A Two-Column Web Page Layout Based on the Rule of Thirds

If youíre a self-taught web designer who wants to take your existing skills to the next level, then you should seriously consider learning some essential concepts of graphic design, such as the Golden Proportion and the Rule of Thirds, which surely will make your web sites look much more harmonious and aesthetically pleasant to visitors.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 7
July 23, 2009
  1. · A Two-Column Web Page Layout Based on the Rule of Thirds
  2. · Designing a web page with the Rule Of Thirds
  3. · Building a fixed, two-column web page design
  4. · Creating a sample web page layout

print this article

A Two-Column Web Page Layout Based on the Rule of Thirds
(Page 1 of 4 )

In this seven-part series of articles, youíll learn not only the theory that stands behind using these popular design principles, but how to put them into practice with CSS/XHTML to create all sorts of web page layouts that will be in perfect harmony with a pattern that occurs very frequently in elements of nature.

Now that I have outlined the topics that are covered by this group of tutorials, itís time to quickly summarize the concepts deployed in the previous one. In that part of the series, I explained how to build a fixed web page design using the Rule of Thirds. In this case, the design in question was comprised of three primary columns, aside from the classic header and footer sections.

Apart from practicing some basic techniques for working with floating divs on a web document, the most instructive aspect of the example was the approach used for applying the Rule Of Thirds in web page layout creation. Essentially, implementing this principle was accomplished by dividing the whole web document in thirds both vertically and horizontally, in this way constructing a simple background grid for aligning the corresponding columns.

Undeniably, creating a web page design like the one described above has a few concrete advantages. In general terms, itíll look more appealing and attractive when filled with real content. However, itís also possible to extend the implementation of the Rule Of Thirds a bit further, for instance, for building a design comprised of only two columns.

But how can this be done? You might be wondering. Well, once the web document has been divided into thirds, if you simply remove the middle third, and then you should end up with a web page made up of only a pair of columns, right? Thatís exactly what Iím going to do in the next few lines, so letís see how to use the Rule Of Thirds for creating a two-column web page design!

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