Goodspeed IT Rants

CSS to debug alignment problems

If you want to check the alignment of two design elements, you can add a grid line such as one would use in Photoshop or Gimp.

Just add an empty span to the page that contains the elements you want to align:

<span class=”horizontal_grid_line”>&nbsp;</span>

Then in your CSS add the following declaration:

.grid_line {

position:     absolute;

width:         1000px;

margin-top:  35px;

border-top:   2px red solid;

}

Then just make sure all the design elements touch the grid line, and get rid of it.

Notes:

• “position: absolute;” allows the span to float above everything else and not shift anything on the page (which would defeat the purpose).
• “width” just needs to be long enough to reach between the elements you care about.
• “margin” sets the position of the grid line.
• “border” just needs to be a color that won’t blend in to the background.

To create a vertical line, it’s pretty much the same.  Just switch the following:

• “width” should become “height”.
• “margin-top” should become “margin-left”.
• “border-top” should become “border-left”.