Posted by Rob Stampfli on 05/17/06 23:11

Suppose one declares a header element "position:fixed" to force
it to remain on the top of the screen even as one scrolls through
the rest of the page. Is there a way to position the relative
layout that follows to come directly after the fixed element so
that none of the relative component is hidden behind the fixed
element? By default, the relative markup seems to be laid out
as if the fixed element doesn't exist. I realize I could simply
add some initial white space to force the hidden part further
down the page, but older browsers don't sqwawk "position:fixed"
(or "position:absolute") and on them the white space appears
after the header element, causing a sizeable gap between the
header and the real body of the page on these browsers. Is
there any way to establish a relationship between a fixed and
relative element more elegantly?

Example (with whitespace added to prevent hiding of data):

<http://cboh.org/fixed-layout-problem.html>

Look at this on a modern browser (say, Firefox), and on an
ancient one (NS4 or IE4) to see what I mean.

Rob

[Back to original message]