I have an issue where elements in divs seemingly align randomly, not responding to any align tag, and where divs create extra space above or below its element. I'm using the 960 grid system and I have not altered the stock CSS file lest my fingers blow it up.

I've put up a test page here, and please excuse some of the dodgy code :-D

It's still in it's very early stages (as am I), but I don't feel I can move on until I can comfortably understand what is causing the issue.

The best example on that page is the bottom horizontal bar and elements underneath. The bar adds a few pixels of dead space, and the elements below that align to different parts of their respective divs.

Why is it that elements seemingly do not standardise their alignment given no instruction, and what causes extra space again where no instruction was given?

My own thought was to relatively position everything individually, but I'm worried this will cause issues and 'break' the grid. Other than that, I unno.

Thanks