Scrolling content below a fixed header.

[justinbriggs1]

Hey everyone, my site needs a static header (doesn't move), with the content scrolling underneath. I thought this could be done without any iframes, but I can't seem to remember the best way to do it. I have attached an image for reference. Thanks,JW

[Synook]

You just make the portion you want scrollable to be overflow:auto, with some code to stop it from exceeding the height of the window.

[Guest reshaba]

Synook is right!.. You can place the static header in a table and place the content in a separate table with in a div. Fix the height & width of the div according to ur requirement. But never forget to set the style='overflow:auto;'

[thescientist]

Synook is right!.. You can place the static header in a table and place the content in a separate table with in a div. Fix the height & width of the div according to ur requirement. But never forget to set the style='overflow:auto;'

I would advise against the majority of that advice. Your suggestion of the use of tables in this situation is considered against best practices and is unsemantic. Tables should only be used for tabular data. Your suggestion for using the div could be part of the solution, just leave the tables out of it.btw, to the OP, I really like that header, especially how the icons at the top are "drawn"

[justinbriggs1]

Thanks for the complement and all of your suggestions. I'll post back once I do some experimenting. In the meantime, can anyone provide a link to a site that does this specifically? Both me and my designer know we have seen it done, but can't seem to remember where we saw it. Thanks again.

[thescientist]

it shouldn't be that hard to implemement.HTML

<div id="header">  <img src="header.jpg" alt=""/></div><div id="content">  <p>scrollable content (add lots of it so it exceeds the div's height)</p></div>

CSS

#header{  height: 100px;}#content{  height: 200px;  overflow: auto;}