3 columns layout css, moderated

The famous 3 column layout is used all round the place : from default wordpress blog template to most advanced daily news paper edition such as iht.com (International Herald Tribune) or lemonde.fr, multiple columns allow difficult content hierarchy choices to be made . While it's a great idea to reproduce such a nice and extensible layout, playing with multiple columns is a dangerous game. Column heights, font size, paragraph justification, and last but not least images display are difficult parameters to harmonize when allowed width is fixed and limited.

In spite of its efficiency, the initial pure HTML table coding is now history and it is now widely accepted that CSS based columns layout is the best option. The two sites below, designed respectively by Studio7Design (British Columbia Canadians) and South Creative (Australia) sample various visual tips that cover most homepage layout requirements.

  • Both feature the inevitable top and bottom menu bars, duplicated on the whole site with the logo and site banner. All of them cover the full width of the website
  • 3 columns, fixed width (both), 3rd column subdivided in two horizontal cells (left)
  • 3 columns, one single  color per column reinforces the page division (right), each cell  is then carefully divided into title, text and image.

http://www.goodavocado.com/ - http://meehantherapy.com/

1 reply

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *