Getting 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>