For this tutorial, I already have the background image made. I misaligned everything on purpose to show how you can align divs in the layout. Also, how to change the background color of a div by using the Color Picker. Instead of guessing like me, I did not realize how good the Pixel Measurer actually is, until i tested it. It works perfectly. So if you want to figure out how much space is required to move a div to the left, right, up, or down, just use the tool below. Questions, comments, suggestions. The zoom worked well here, is it too far? Any questions, comments, suggestions, just say.
How do you measure the pixel distance between divs to not blind guess? Here is a good measurer I found, you need to download the firefox browser to use it. It will download to the add-ons. Just click the blue link. http://www.kevinfreitas.net/extensions/measureit/
I am trying to make it not to be confusing by explaining every step i'm doing. If you follow along, you should be able to do one of your own! Any questions, comments, suggestions, ask away. Feel free to rate, comment, or subscribe.