When it comes to layout markup and CSS I use FireBug and the Webdeveloper Toolbar for FireFox constantly.
With HTML block alignment a useful tool is the ruler under the Miscellaneous tab in the Webdev Toolbar.
The problem with it is this, every page refresh you need to add it back.
This is a pain when aligning a lot of different size elements, like forms for example.
So I made a simple tool for it, a graphic that is repeated with CSS over the area you are working in or the entire body.
A tiny bit of CSS and HTML goes a long way.
It is open source and available with an example on GitHub Grid Layout Overlay
Add the div to the area you want the grid to overlay.
Drop the image in an accessible path.
Add the CSS
background: url('../img/100grid.png') repeat;
top: -12px; /* Adjust the Vertical position */
left: -6px; /* Adjust the Horizontal position */
opacity: .7; /* Adjust the opacity */
Make sure to adjust the path to point to the image location url(‘../img/100grid.png’)
I will be posting YouTube entries on this also.