A Two-Column Web Page Layout Based on the Rule of Thirds
(Page 1 of 4 )
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.
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!
Next: Designing a web page with the Rule Of Thirds >>
More Style Sheets Articles
More By Alejandro Gervasio
