Web Log

Two columns for everything

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.

<h2 class="layoutTitle">{NODE.title|htmlspecialchars}</h2>

[CONTAINER.1]

</div>

[CONTAINER.2]

</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

Creating Thumbnails Using the CSS Clip Property

Thursday 1 July 2010 by Norbert Laposa

I had an idea of creating a clip image by using CSS, so the CSS clip property looked like the perfect way to achieve that. After some googling I found Joe's article at seifi.org. Joe advocated an entirely functional, but unnecessarily complex solution.

I came up with a much simpler way. The trick is that you don't need to use the CSS clip property when you want to clip an image. Here is a simple way to clip an image to 300x200px, push 20px top and 30px left:

div.imageWrapper {
  width: 300px;
  height: 200px;
  overflow: hidden;
}

div.imageWrapper img {
 margin-top: -20px;
 margin-left: -30px;
}

Basket

Web Log

Two columns for everything

Creating Thumbnails Using the CSS Clip Property

Archive

Categories