Help With a Fixed Header

[pressure design]

Hi there Guys,

I am having an issue with the content below my fixed header.

I would normally just add a margin to the content but my header will be changing heights alot so I want to know how I can make it move up and down with the header.

Here is the site, http://jsfiddle.net/UgKJb/

Thanks in advance!!

 

[Phreaddee]

well a fixed header is just that (and therefore its taken out of the document flow)
if you want your "content" to appear as though it is sitting just below the header, you need to give it a margin top. the preferred alternative to this kind of abnormal site behaviour, (which is totally a designers concept rather than a ux element) is to not use a fixed header, and then the document would flow in its natural way and there would be no need for odd margin compensation.

why is it bad UX? it is putting navigation as a higher priority than the content/functionality of the site. If the nature of the site requires constant navigating between pages, then maybe it makes sense. If, on the other hand, it's to help a person find specific content, then probably not.

still I know you wont listen to that gem of wisdom and say "but I want a fixed header!!!" in which case, if your header is 100px make the margin 100px, if the header is 150px make the margin 150px. you could use percentages, ems, whatever worked for you, in the end as long as the header height and the contents top margin are equal it will work.

 

[pressure design]

Thank you for taking the time to answer.

I am relatively new to HTML/CSS so wasnt sure if this was possible or not.

Anyhow thank you for your advice and I am going to move away from the fixed header.