Simple CSS Layout Tip: Use a “debug” class

css_logoGetting the floats, widths, paddings and margins of your divs just right in a complex page layout can oftentimes be a huge PITA. If you aren’t using one of the many full-featured web developer browser extensions, one of my favorite quick CSS tricks is to create a “debug” class which lets me easily see the borders of my divs:

.debug { border:1px dashed red; }

This allows me to simply add “debug” to any div’s existing class list and see what is happening on the page. Example:

<div class="container debug">
<div class="main debug">blah, blah...</div>
<div class="nav debug">nav blah...</div>
</div>
<div class="footnote debug">blah, blah...</div>


Sample output:

Screenshot from a page on TruthTruthLie.me

One caveat is that the debug class’ 1px border will slightly alter your positioning if your div’s don’t currently have a 1px border. As well, they will replace any border that you have defined for that div. If this is a problem you can just set a background color instead, which won’t add any width or height to your divs:

.debug { background-color:#EFE; }

Personally, I like the border method and rarely run into a problem where the extra 2px width and height matters.

I’d love to hear your own favorite CSS hacks. Please leave them in the comments for all to see and enjoy.

PS: I’d also love for you to check out and give feedback on my new Django site TruthTruthLie.me. Create a “Two Truths and a Lie” quiz and see how well your friends really know you.