How to align your HTML ID's using CSS

I found an excellent tutorial on how to create a design at csshowto.com. Following their steps, I came up with my own design and created a graphic for my top left logo.

This is the first revelation. A new way of thinking for me. Normally I would have an image of just the logo, but the way to do it for a website is to include everything in the background, such as any borders that might pass through. Probably an obvious thing to do for web-designers. To my mind, I feel the need to be able to change the colour of my borders just by changing a single variable, and not having to rework a few JPGs.

I then struggled with alignment. Did the width measurement include padding, should I subtract the margins? I aligned some using trial and error, but then others fell out of place. It did not help that my CSS editor had a bug that mixed up the order of the margins.

I was on the verge of giving up but then by chance I discovered a setting, and everything fell into place. I have not seen this mentioned anywhere on any tutorial, but it really makes things easy for a beginner, and would probably help the experienced if things start going wrong.

TIP: Add an outline to your ID's and you can see where they are aligning

In your CSS, add the command

border: thin dashed #0033FF;

Change the colour for different IDs and when you view your web page, it is easy to see where your sections actually are.

When I did this, I could easily see that I had miscalculated a width because I had either included or excluded padding. (If anyone knows of a useful chart that shows the margin, padding, width relationship, I will be grateful). My other big mistake was on my logo, I had allowed 5 pixels of background outside the border but not allowed for that elsewhere. It was so obvious when I saw it with the dashed outline.