As web designers we sometimes have a tough time figuring out exactly why a particular layout item is behaving that way. Sometimes it’s a matter of the cascade being at play, other times it’s a specific rule that we have set.
One of the best tricks that I have discovered is the use of blocks of color when initially setting up a layout or when debugging it.
There are some important notes about this:
- Your layout will look as though it was colored in by a 5 year old on a sugar high in a crayon factory. This makes it easy to spot the culprit for breaking the layout, but it can be painful to look at.
- I use two things to make sure I know that the color is not supposed to survive into the final .css file:
- I use the color names rather than hex codes.
- I also include a comment /*debugging*/ next to each item.
This post features one of my examples (in this case with a right sidebar, and navigation across the top of the page). You can view and download the HTML and the CSS from Google Drive.
This is one of the easiest CSS tricks that I have found when playing around with a layout. I picked it up from a tutorial by Russ Weakley a couple of years ago and it has saved my sanity a couple of times.

