Getting your CSS columns right
As I’ve mentioned in previous posts, I’m a rather mathematical web designer. I like my layouts to be pixel-perfect and hence not a big fan of variable-width layouts.
However, whereas I’d love to think that building my sites so everything slots in perfectly would make the task easier – it more often-than-not leads to more struggle, especially when trying to maintain good ol’ cross-browser compatibility.
For a while now I’ve used a solution that many web designers quite probably dislike while, as is the way, many others stick to it religiously. And here it is:
Within my central container/wrapper, all other blocks (header, navigation, content, sidebar, footer etc) I float generally left, and display inline. It may seem like a lot of unnecessary CSS, but my sites always render well in the majority of browsers. Of course this approach doesn’t suit itself for all designs, but 90% of the time adapts well and causes far less headaches along the line.
The problem with being too mathematical is that sometimes if you make the slightest error in your CSS, it can throw your whole site out of proportion. The way I used to research what mistakes I’d made would be to apply a distinct background colour to the affected elements so they would be easy to see on the page. From there I could tell what was too big, where there was too much padding or margins. However now the majority of the time I use the Firefox ‘Firebug‘ plugin… which honestly has been a godsend.
Some of the most common mistakes I make while coding CSS are through changing certain properties without amending other attributes that may have been affected. Like so:
- Adding a border without decreasing the width/height (because borders add width). For example if added a 2px border to an element, I must remember to decrease it’s width by 4px (accounting for both sides of the border). This only really applies to top level divs that have a fixed, precise width.
- Adding padding/margin without taking into account the width/height, for the same reasons as above.
- Don’t forget that a background image starts where the padding begins, so think whether you need to use a margin or padding on selected elements because this will affect any background images/color or borders.
- Making the width of a certain element wider than it’s parent. For example, if I made a <h2> 300px wide within a 250px wide div – in the majority of cases the header would overflow… messy!
That outlines a few of the primary reasons my layouts go topsy-turvy in development. The majority of the time I play with heights and widths and forget to balance it out. Using Firebug or adding borders/background colour to elements generally serves well in helping me understand where I’ve gone wrong.
No matter how many layouts I build, I can never sit down and write the entire XHTML and CSS code from start to finish and have it look perfect. Not because I don’t know what I’m doing but because I often just forget the slightest line of CSS or forget to close an <img> properly (duh!)
But that’s what web developer tools and plugins are there for.
A great article on why your CSS layouts may be going haywire can be found on Kyle Neath’s website Warspire.
- Share:
-
