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.
| Select All |
|---|
1
| <div id="grid"></div> |
Drop the image in an accessible path.
Add the CSS
| Select All |
|---|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| #grid {
display: block;
position: absolute;
background: url('../img/100grid.png') repeat;
z-index: 10000;
width: 100%;
height: 100%;
min-height: 800px;
margin: 0;
padding: 0;
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’)
Then you should end up with a grid over your layout like this simple example.

I will be posting YouTube entries on this also.