Header, footer and sidebars have fixed position. In the center a content area with both scroll bars. No outer scroll bars on the browser. I have a layout that works in IE7 and FF. I need to add IE6 support. How can I make this work?
Here is an approximation of my current CSS.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Layout</title> <style> * { margin: 0px; padding: 0px; border: 0px; } .sample-border { border: 1px solid black; } #header { position: absolute; top: 0px; left: 0px; right: 0px; height: 60px; } #left-sidebar { position: absolute; top: 65px; left: 0px; width: 220px; bottom: 110px; } #right-sidebar { position: absolute; top: 65px; right: 0px; width: 200px; bottom: 110px; } #footer { position: absolute; bottom: 0px; left: 0px; right: 0px; height: 105px; } @media screen { #content { position: absolute; top: 65px; left: 225px; bottom: 110px; right: 205px; overflow: auto; } body #left-sidebar, body #right-sidebar, body #header, body #footer, body #content { position: fixed; } } </style> </head> <body> <div id="header" class="sample-border"></div> <div id="left-sidebar" class="sample-border"></div> <div id="right-sidebar" class="sample-border"></div> <div id="content" class="sample-border"><img src="/broken.gif" style="display: block; width: 3000px; height: 3000px;" /></div> <div id="footer" class="sample-border"></div> </body> </html>
Might be overkill for your project, but Dean Edwards’ IE7 javascript adds support for fixed positioning to IE6.