skyer2000 Posted November 10, 2008 Share Posted November 10, 2008 I'm having a problem figuring out how to keep the header of my page while not having the content pane extend past the footer (flush with footer). Here is what I'm at right now -> http://fansn.com/temp.php Any ideas on how to fix that scrollbar to become flush with the footer? Quote Link to comment Share on other sites More sharing options...
dropfaith Posted November 10, 2008 Share Posted November 10, 2008 instead of using 100 percent on just the container i would make it so the whole layout flexes header 10% contain80% footer 10% will still fill the entire page but they all hold there spots and make a container that is 100% just for centering the page and what not Quote Link to comment Share on other sites More sharing options...
skyer2000 Posted November 10, 2008 Author Share Posted November 10, 2008 I looked into that but I do require the header to have a height of 125px. The footer can be flexible like that, just not the header. Quote Link to comment Share on other sites More sharing options...
SuperBlue Posted November 12, 2008 Share Posted November 12, 2008 Note that this layout is unlikely to work in IE6, users of IE6 and ealier are encouraged to upgrade. Those using win9x should shift to opera, or upgrade their OS which would allow them to get a new browser. The following layout is position based, I'm sure you can modify it to fit your own requirements. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>SE Friendly Absolute Positioning Example</title> <style type="text/css"> html, body { margin: 0;padding: 0; height: 100%; } #Basement { position: relative; /* Enables positioning inside the wrapper */ width: 75%; min-width: 800px; max-width: 1600px; height: 100%; margin: 0 auto; /* Normal way to center the Page AKA wrapper */ } #Content { position: absolute; top: 135px;right: 0;bottom: 135px; width: 75%; min-width: 500px; overflow-y: scroll; background: green; } #Navigation { position: absolute; top: 135px; /* Height of the Header */ left: 0;bottom: 135px; width: 25%; min-width: 200px; background: silver; } #Header { position: absolute; top: 0;left: 0; width: 100%;height: 135px; min-width: 200px; background: gray; } #Footer { position: absolute; bottom: 0;left: 0; width: 100%;height: 135px; min-width: 200px; background: gray; } </style> </head> <body> <div id="Basement"> <div id="Content"> <h1>SE Friendly Absolute Positioning Example</h1> <p>This is the content.</p> </div> <div id="Navigation"> <p>Navigation</p> </div> <div id="Header"> <p>Header</p> </div> <div id="Footer"> <p>Footer</p> </div> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
BoltZ Posted November 12, 2008 Share Posted November 12, 2008 Why do you have 2oo8 instead of 2008 lol. Quote Link to comment Share on other sites More sharing options...
SuperBlue Posted November 12, 2008 Share Posted November 12, 2008 Why do you have 2oo8 instead of 2008 lol. If this wasn't in the computer, people wouldn't even know the difference. They are both round ain't they? Quote Link to comment Share on other sites More sharing options...
BoltZ Posted November 12, 2008 Share Posted November 12, 2008 It just caught my eye and made me curious. It looks funky Quote Link to comment Share on other sites More sharing options...
skyer2000 Posted November 12, 2008 Author Share Posted November 12, 2008 It is actually 2008 (try copy/pasting it into notepad), when Georgia is that small the zeros look like that for some reason. The absolute positioned layout is exactly what I needed, works great! To make it work you just need to define the widths (100%) of each element, then keep the container 1000px. Quote Link to comment Share on other sites More sharing options...
BoltZ Posted November 12, 2008 Share Posted November 12, 2008 Oh lol well try setting a font family also because when i just typed in notepad 2oo8 it looked exactly the same so I was like why in the world did he replace 0 with o lol Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.