[web] Frameless frames with CSS (solved)

Hi, I'm tyring to get a frames effect without using frames, but using CSS. A little research led me to a couple of sites; I've amended the code somewhat to get the final layout I'm after. But - IE is proving a slight headache. Here's the code:


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title> A CSS Frame Layout </title>
<meta name="Author" content="Stu Nicholls" />
<style type="text/css">

body {
  margin:0;
  border:0;
  padding:0;
  height:100%; 
  max-height:100%; 
  background:#eee; 
  font-family:arial, verdana, sans-serif; 
  font-size:76%;
  overflow: hidden; 
  }

#header {
  position:absolute; 
  top:0; 
  left:0; 
  width:100%; 
  height:120px; 
  background:#53829d;
  color:#fff;
  }

#footer {
  position:absolute; 
  bottom:0; 
  left:0;
  width:100%; 
  height:50px; 
  overflow:auto; 
  text-align:right; 
  background:#73a2bd;
  }

#left
{
 position : absolute;
 top : 120px;
 left : 0px;
 width : 150px;
 background-color : #aaaaaa;
 padding : 10px;
}

#right
{
 position : absolute;
 top : 120px;
 right : 0px;
 width : 150px;
 background-color : #abcabc;
 padding : 10px;
}

#contents {
  position:fixed; 
  top:120px;
  left:170px;
  bottom:50px; 
  right:170px; 
  overflow:auto; 
  background:#fff;
  padding-left : 10px;
  padding-right : 10px;
  }

/* for internet explorer */

* html body 
{
 padding-top : 120px;
 padding-bottom : 50px;
}

* html #contents 
{
 overflow : auto;
 margin-left : 150px;
 margin-right : 150px;
 height:100%; 
 width:100%; 
}

p {width:250px;}

</style>
</head>

<body>

<body>


<h1>This is the HEADER area</h1>
<h2>Resize me to see the scroll bars.</h2>



<h3>This is the FOOTER area</h3>



Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
sed diam nonummy nibh euismod tincidunt ut laoreet dolore 
magna aliquam erat volutpat. Ut wisi enim ad minim veniam, 
quis nostrud exerci tation ullamcorper suscipit lobortis 
nisl ut aliquip ex ea commodo consequat. Duis autem vel 
eum iriure dolor in hendrerit in vulputate velit esse 
molestie consequat, vel illum dolore eu feugiat nulla 
facilisis at vero eros et accumsan et iusto odio dignissim 
qui blandit praesent luptatum zzril delenit augue duis 
dolore te feugait nulla facilisi.



Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
sed diam nonummy nibh euismod tincidunt ut laoreet dolore 
magna aliquam erat volutpat. Ut wisi enim ad minim veniam, 
quis nostrud exerci tation ullamcorper suscipit lobortis 
nisl ut aliquip ex ea commodo consequat. Duis autem vel 
eum iriure dolor in hendrerit in vulputate velit esse 
molestie consequat, vel illum dolore eu feugiat nulla 
facilisis at vero eros et accumsan et iusto odio dignissim 
qui blandit praesent luptatum zzril delenit augue duis 
dolore te feugait nulla facilisi.



<h1>This is the CONTENTS area</h1>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
sed diam nonummy nibh euismod tincidunt ut laoreet dolore 
magna aliquam erat volutpat. Ut wisi enim ad minim veniam, 
quis nostrud exerci tation ullamcorper suscipit lobortis 
nisl ut aliquip ex ea commodo consequat. Duis autem vel 
eum iriure dolor in hendrerit in vulputate velit esse 
molestie consequat, vel illum dolore eu feugiat nulla 
facilisis at vero eros et accumsan et iusto odio dignissim 
qui blandit praesent luptatum zzril delenit augue duis 
dolore te feugait nulla facilisi.



Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
sed diam nonummy nibh euismod tincidunt ut laoreet dolore 
magna aliquam erat volutpat. Ut wisi enim ad minim veniam, 
quis nostrud exerci tation ullamcorper suscipit lobortis 
nisl ut aliquip ex ea commodo consequat. Duis autem vel 
eum iriure dolor in hendrerit in vulputate velit esse 
molestie consequat, vel illum dolore eu feugiat nulla 
facilisis at vero eros et accumsan et iusto odio dignissim 
qui blandit praesent luptatum zzril delenit augue duis 
dolore te feugait nulla facilisi.


Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
sed diam nonummy nibh euismod tincidunt ut laoreet dolore 
magna aliquam erat volutpat. Ut wisi enim ad minim veniam, 
quis nostrud exerci tation ullamcorper suscipit lobortis 
nisl ut aliquip ex ea commodo consequat. Duis autem vel 
eum iriure dolor in hendrerit in vulputate velit esse 
molestie consequat, vel illum dolore eu feugiat nulla 
facilisis at vero eros et accumsan et iusto odio dignissim 
qui blandit praesent luptatum zzril delenit augue duis 
dolore te feugait nulla facilisi.



</body>
</html>

Everything works fine in firefox. However, in IE(6), if the width of p is set sufficiently small that the contents div has to show a scroll bar straight away, then the right div does not appear until the window is resized (have a play, it'll seem obvious when it happens). So my question is - huh? Why is this happening? Why does my brain hurt? Any help much appreciated, Jim. [Edited by - JimPrice on October 14, 2005 7:24:15 PM]

Topic Locked