Posted on Wednesday 21 July 2010 by Norbert Laposa

This article will describe how to build any layout from a combination of two columns.

Building layout in web design is considered to be the hardest thing. The most popular method at the moment seems to be the grid layout. It's not really natural. In my opinion it's something like using a bitmap graphic when you should be using a vector graphic.

To understand this article you do not need to have any knowledge of HTML, CSS, or any Adobe products. You only need to switch off everything you know about web design and try to look at it as normal human being. Tons of material has been written about how to create 2 or 3 column layout for your website, like the "holy grail" articles or grid design.

The key thing is to use nested sets of two column layouts, i.e. Fibonacci number based set below. Insert the same code into [CONTAINER.1] or [CONTAINER.2] recursively and it does the trick.

<div class="twoColumnLayout {NODE.css_class}">
    <div class="layoutWrapper">
        <div class="top"><span></span></div>
        <div class="layoutContent">
            <div class="layoutContentWrapper">
                <h2 class="layoutTitle">{NODE.title|htmlspecialchars}</h2>
                <div class="layoutColumnOne">
                    <div class="layoutColumnWrapper">
                        [CONTAINER.1]
                    </div>
                </div>
                <div class="layoutColumnTwo">
                    <div class="layoutColumnWrapper">
                        [CONTAINER.2]
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom"><span></span></div>
    </div>
</div>

 

Fibonacci number based layouts

Class Name layoutColumnOne layoutColumnTwo
fibonacci-1-5 Fibonacci 1/5 ratio 16.6% 83.3%
fibonacci-1-3 Fibonacci 1/3 ratio  25% 75%
fibonacci-2-5 Fibonacci 2/5 ratio 28.6% 71.4%
fibonacci-1-2 Fibonacci 1/2 ratio 33% 66%
fibonacci-3-5 Fibonacci 3/5 ratio 38.2% 61.8%
rounded to Golden Ratio *
fibonacci-1-1 Fibonacci 1/1 ratio 50% 50%
fibonacci-5-3 Fibonacci 5/3 ratio 61.8% 38.2%
rounded to Golden Ratio **
fibonacci-2-1 Fibonacci 2/1 ratio 66% 33%
fibonacci-5-2 Fibonacci 5/2 ratio 71.4% 28.6%
fibonacci-3-1 Fibonacci 3/1 ratio 75% 25%
fibonacci-5-1 Fibonacci 5/1 ratio 83.3% 16.6%

Examples how to build different 1, 2, 3, 4, 5 and more columns layouts using just Fibonacci 2 columns are on Onxshop documentation page.

 

* The ratio of consecutive numbers in the Fibonacci is close to 1.618, the Golden Ratio - convergence of Fibonacci number in infinity. Fibonacci number for 3:5 would be 1:1.666, Golden Ration is 1:1.618

** 1.666:1, convergence to golden ratio, 61.8/38.2 (Golden ratio 1.618:1), convergence of Fibonacci number

58 Howard Street
Belfast BT1 6PJ

Send email

+44 (28) 9032 8988
+353 (48) 9032 8988