Hi, I'm trying to write a layout with some elements that should scale with the browser window. The code works fine on Safari, Firefox and IE7 but IE6 won't play. The two things that fall apart are the divs that are supposed to scale. Since I don't know the size of the elements as the window scales I specified them using top, bottom, left and right but IE6 seems to dissregard this. Is there a workaround for this problem? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Test</title> <style type="text/css"> * { margin: 0; } html, body { height: 100%; background-color: #000; } #header { height: 60px; width: 100%; background-color: #004; } #header_logo { position: absolute; left: 0px; top: 10px; width: 220px; height: 40px; background-color: #00c; } #header_content { position: absolute; left: 220px; right: 0px; top: 10px; height: 40px; background-color: #800; } #wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -60px; } #content { padding-top: 10px; padding-left: 10px; padding-right: 80px; background-color: #fff; } #bar { position: absolute; top: 80px; bottom: 80px; right: 20px; width: 40px; background-color: #c00; } .footer_height { height: 60px; } #footer { background-color: #008; } </style> </head> <body> <div id="wrapper"> <div id="header"> <div id="header_logo"></div> <div id="header_content"></div> </div> <div id="content"> <p>Hello World!</p> </div> <div id="bar"></div> <div class="footer_height"></div> </div> <div id="footer" class="footer_height"> <p>Copyright (c) 2008</p> </div> </body> </html> Code (markup):