Hi,
following layout does not work with IE 6.
It is a modified version of
http://www.dynamicdrive.com/style/la...frames-layout/
Can someone help me please?!
Code:<!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> <!--Force IE6 into quirks mode with this comment tag--> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>DIV-Layout</title> <style type="text/css"> body{ margin: 0; padding: 0; border: 0; overflow: hidden; height: 100%; max-height: 100%; } #SideDiv{ position: fixed; top: 30px; /*Set height value to WidthOfLeftFrameDiv*/ left: 0px; bottom: 0; width: 150px; /*Width of left frame div*/ overflow: auto; background-color: red; color: white; } #TopDiv{ position: absolute; top: 0px; left: 0px; right: 0; height: 30px; /*Height of top frame div*/ overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/ background-color: green; color: white; } #BottomDiv{ position: absolute; top: auto; left: 150px; /*Set left value to WidthOfLeftFrameDiv*/ bottom: 0; right: 0; height: 50px; /*Height of bottom frame div*/ overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/ background-color: navy; color: white; } #DataDiv{ position: fixed; top: 30px; /*Set top value to HeightOfTopFrameDiv*/ left: 150px; /*Set left value to WidthOfLeftFrameDiv*/ right: 0; bottom: 50px; /*Set bottom value to HeightOfBottomFrameDiv*/ overflow: auto; background: yellow; } .innertube{ margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/ } * html body{ /*IE6 hack*/ padding: 30px 0 50px 150px; /*Set value to (HeightOfTopFrameDiv 0 HeightOfBottomFrameDiv WidthOfLeftFrameDiv)*/ } * html #DataDiv{ /*IE6 hack*/ height: 100%; width: 100%; } * html #TopDiv, * html #BottomDiv{ /*IE6 hack*/ width: 100%; } </style> <script type="text/javascript"> /*** Temporary text filler function. Remove when deploying template. ***/ var gibberish=["blablabla", "blublublu", "bliblibli", "blobloblo"]; function filltext(words){ for (var i=0; i<words; i++) document.write(gibberish[Math.floor(Math.random()*4)]+" ") } </script> </head> <body> <div id="DataDiv"> <div class="innertube"> <h1 align="right">DataDiv</h1> <p><script type="text/javascript">filltext(800)</script></p> </div> </div> <div id="TopDiv" align="right"> TopDiv </div> <div id="SideDiv"> <h1 align="right">SideDiv</h1> <p><script type="text/javascript">filltext(300)</script></p> </div> <div id="BottomDiv" align="right"> BottomDiv </div> </body> </html>



Reply With Quote
Bookmarks