I'm trying to create a frameset-like display using div tags. I want a fixed header and footer area, and 2 proportional frames in the middle. My code works in Firefox, but not IE6:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>test</title> <link href="qstyle.css" rel="stylesheet" type="text/css"> </head> <style> body { margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 0; } #header { position: absolute; width: 100%; height: 60px; top: 0px; background-color: rgb(239, 236, 223); } #top { position: absolute; width: 100%; top: 60px; bottom: 60%; background-color: pink; overflow: auto; } #bottom { position: absolute; width: 100%; top: 40%; bottom: 30px; background-color: tan; overflow: auto; } #footer { position: absolute; width: 100%; height: 30px; bottom: 0px; background-color: rgb(239, 236, 223); } </style> <body> <div id="header"> </div> <div id="top"> Bunch of text<br> Bunch of text<br> Bunch of text<br> Bunch of text<br> Bunch of text<br> Bunch of text<br> Bunch of text<br> Bunch of text<br> Bunch of text<br> Bunch of text<br> Bunch of text<br> Bunch of text<br> Bunch of text<br> Bunch of text<br> Bunch of text<br> Bunch of text<br> Bunch of text<br> Bunch of text<br> Bunch of text<br> Bunch of text<br> Bunch of text<br> Bunch of text<br> Bunch of text<br> Bunch of text<br> Bunch of text<br> </div> <div id="bottom"> Some other stuff<br> Some other stuff<br> Some other stuff<br> Some other stuff<br> Some other stuff<br> Some other stuff<br> Some other stuff<br> Some other stuff<br> Some other stuff<br> Some other stuff<br> Some other stuff<br> Some other stuff<br> Some other stuff<br> Some other stuff<br> Some other stuff<br> Some other stuff<br> Some other stuff<br> Some other stuff<br> Some other stuff<br> Some other stuff<br> Some other stuff<br> Some other stuff<br> Some other stuff<br> Some other stuff<br> Some other stuff<br> </div> <div id="footer"> </div> </body> </html>
I suppose I don't care that much about the center frames being defined by percentages, but changing things to make the top one fixed size and the bottom one fill the remaining area doesn't seem to work either:
#top { position: absolute; width: 100%; top: 60px; height: 100px; background-color: pink; overflow: auto; } #bottom { position: absolute; width: 100%; top: 160px; bottom: 30px; background-color: tan; overflow: auto; }
IE ends up with a scroll bar for the whole page, and the bottom frame extends under the footer.
Any suggestions would be much appreciated.
W
absolute positioning bug in IE?
http://www.stunicholls.myby.co.uk/layouts/body4.html
Might be of help.
absolute positioning bug in IE?
Thanks for pointing that out, but I don't think it will work for me. It uses an IE hack of adjusting the border width to position the frame contents, but that won't work to position 2 frames with a 40/60 split (or fix + rest split) since one border will end up covering the other frame.
Still looking...
W