CSS layouts help
I wrote this post a while back. The content can still be relevant but the information I've linked to may not be available.
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 (!)
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!
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.
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.