Re: Q1. The height of the header is determined by (in this case) the height of the ‘logo’ element which is set to 100px.
If you remove that…the header will ‘collapse’ to the height of the various elements inside. Occasionally, the browser may sneak a little extra padding in there so it’s often worth setting the max-height of your logo (in this case), to the height of your logo image.
As a general rule of thumb (I beleive) you should avoid positioning unless there is a very special effect you are trying to achieve (perhaps an overlap or a box that moves with the scrolling of the browser). Using it to ‘fix’ problems with your layout or css is not a good idea and just means that you haven’t coded what you have properly.
You’ll get there…hang in. :)
I’ll get to the others in a while.