I have 2 divs in a page. The top is a header (a toolbar in a sense) that sticks to the top of the viewport and fills its width. The page itself can be very wide to accommodate a table of results which may be many columns wide. Thus, I ended up using fixed position for the header so it stays at the top of the viewport (full width) as you scroll left/right or up/down on the page.
In order to prevent the top of the results div from being overlapped by the header, I've had to give it a position:absolute and set the top css attribute. But that's a problem if the font is increased in the browser and the header gets taller.
is there a way to fix the position of the results div to the bottom of the header div? Ideally a CSS-based solution but if needed I don't mind adding Javascript.
Here is the basic code I'm working with:
<html>
<style type="text/css">
#header { position:fixed; top:0; width:100%; z-index:3; background:lightgrey;
/* Following are IE Hacks to force header to stick to top during scrolling */
_position:absolute; _top:expression(eval(document.body.scrollTop));
_left:expression(eval(document.body.scrollLeft))
}
#results { position:absolute; top:35px; width:100%; margin:3px; padding:3px; }
</style>
<body>
<div id="toolbar">some content</div>
<div id="results">Results go here.</div>
</body>
</html>
Thanks in advance!
