I’m a fan of using CSS frameworks. Two in particular have come in handy; Blueprint and the 960 Grid System. I like the CSS framework for a couple of major reasons:
- Greatly reduce cross-browser frustration with visual elements
- Make it really easy to create complex table-less layouts
One of the major features of both frameworks is the use of columns for layout. Class names generally refer to the number of columns any particular div spans across. The challenge that I’ve noticed many developers face is overcoming their desire to style these structural elements. Take this example (using blueprint):
<div class="span-12">
<p>Left side text</p>
</div>
<div class="span-12 last">
<p>Right side text</p>
</div>
</div>
What if I want a border around the left side? At first glance, you might think it would be easy to add an ID to the first div and give it a border, right? That’s actually a bad idea. Why? Because the grid portion of the CSS framework is made for structure and layout – not for style. Adding a border actually widens the div; which would break the column layout!
My recommendation is to add an additional “styling” div inside the structural div for any block styling you want to do (background color, padding, borders, etc):
<div class="span-12">
<div style="border:1px solid #000; padding:1em;">
<p>Left side text</p>
</div>
</div>
<div class="span-12 last">
<p>Right side text</p>
</div>
</div>
While it may feel like you’re approaching “tag soup”, you still have cleaner markup than a table-based layout.
