Methods of preventing content falling under a fixed header?

I find that when I create a fixed header I use padding to move the content that has fallen below it back into view. I was wondering is there a method of creating the fixed header and keeping the content that proceeds it in the DOM all viewable without using padding/margin?

Fiddle: http://jsfiddle.net/tWT6X/1

Hi,

The fixed element doesn’t exist in the normal flow of the document so the only way for other elements to account for it is to use padding/ margin/ or positioning in various guises to keep clear of the fixed element.

You could use relative positioning on the container that follows the fixed header using an em height for the value “top” equal to the height of the fixed header. Or as you mentioned earlier margins or padding would do similar also. (Or even absolutely place the whole layout below the header.)

There is no other choice but I guess this begs the question “why do you need to find another way”?

Hi Paul,

Thanks for the reply, I just thought I’d put the question out there on the off chance there may have been a way. If my fixed headers height is going to change frequently then Im going to have to control the padding/margin of my following content with js, but if there would have been a way of not having to use padding/margin then I wouldnt have to use js.

Thanks again
Kyle

Yes that’s the problem with a fixed header of variable height and js would be the only solution in that case.