CSS layouts help

There is a learning curve associated with moving from tables-based layouts to entirely CSS-based websites. Speaking from personal experience, the most difficult aspect was getting the layout to work. CSS layout example websites can help.

I was quite happy using CSS to add colours, move paragraphs, and add other styles, but moving into the CSS layout area was more difficult (and a bit scary). My intended move wasn’t helped by the plethora of hacks that were apparently necessary to get round some browser ‘issues’.

Unfortunately, whilst a lot of expert knowledge has undoubtedly been put into these hacks, it’s a real turn-off when you are starting out with CSS layouts. What might be simple changes are often turned into an exercise in seemingly random stylesheet edits (!)

Info: Many hacks are designed to get round problems with Internet Explorer. However, hacks may cause future problems.

Keep it simple, stupid!

I got over my ‘CSS problem’ by finding a couple of CSS layouts that worked well without hacks. It was relatively easy to use these layouts to see how the stylesheet controlled the layout. I also used these layouts in real projects. There’s nothing like a deadline as an incentive to learn!

CSS help

There are two new CSS layout websites that have come to our attention recently. The aim of these website is to offer common CSS layouts that can be styled further but the Mollio example is particularly stylish.

• Layout Gala has 40 website layouts based on the same markup.
• Mollio has five layouts and a styleguide available for download.

The above websites are new but the CSS layouts and tutorials at MaxDesign are also particularly straightforward to understand. This would be our first choice if you are new to CSS layouts.

These websites are a great resource for learning about CSS layouts and for use in your own projects. However, the Mollio examples are probably for the more advanced user because of the comprehensive stylesheets that are used.

· Related » Articles about CSS on this blog
· Related » Why CSS hacks are bad
· Related » Using IE conditional comments