> >Ok, I'll throw it open to the CSS experts. Two divs: > > > ><div>Header</div> > ><div>lots of content</div> > > > >The requirement is that the header div must not scroll off the page, > >it should remain fixed at the top of the page. The content div will > >fill with content and should be scrollable vertically when needed. > > That's totally possible in CSS, and it's actually possible in two > different ways. Getting it to work in browsers, though-- that's the > trick. > Method one basically recreates a frame set without the frame > markup. It goes something like this: > > html, body {height: 100%;} > #header, #content {position: fixed;} > #header {top: 0; left: 0; right: 0; height: 50px;} > #content {top: 50px; bottom: 0; left: 0; right: 0; > overflow: scroll;} > > You could, of course, replace the '50px' values with a different one, > using any unit you like, including percentages. > Method two nails the header to the top of the viewport, and lets > the rest of the content scroll "underneath" it. > > #header {position: fixed; top: 0; left: 0; right: 0; height: 50px;} > #content {padding-top: 50px;} > > Again, you're free to replace the '50px' with something else. > The problem with both methods is IE/Win, which doesn't support > 'fixed' on 'position', so the effect wont' be what you want. There > are JS and behavioral solutions to fake support for 'position: fixed' > in IE/Win, such as Dean Edwards' IE7, but I find them to be largely > unsatisfactory because the element scrolls around and then jumps into > place. > An adapted approach is to have IE/Win absolutely position the > header and just accept that it will scroll in IE/Win while remaining > in place for all other modern browsers. That would be: > > #header {position: fixed; top: 0; left: 0; right: 0; height: 50px;} > * html #header {position: absolute;} /* for IE/Win */ > #content {padding-top: 50px;} > > Hopefully one of those solutions will work for you.
Ahhh I take it all back - method one is exactly what I was after. I see now why the hole is in IE not supporting fixed and not in the spec (I was approaching the problem from the wrong end). One point - is possible to only have the vertical scrollbar and not the horizontal? (overflow-y in IE) Thanks for the explanation, andrew ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/