Home/ Questions/Q 314815
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T08:14:04+00:00

Background I need to do a rather complex layout for a client, using fixed

  • 0

Background

I need to do a rather complex layout for a client, using fixed DIV. Everything is fine in IE8, FF3 and Chrome, but IE7 mangles all the thing

Edit: The fixed DIVs are a must, only the content DIV must scroll (That is the spec, sorry)

HTML and CSS code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>
    test
</title>

    <!--[if lt IE 8]>

    <![endif]--> 

    <!--[if lt IE 7]>

    <![endif]--> 

</head>

<body style="margin: 10px;">
<div id="wrapper" style="width: 960px; margin: 0 auto; position: relative;  border: 1px solid red; overflow: hidden;">

    <div id="header" style="position: fixed; width: 185px;  height: 600px;  top: 10px;  border: 1px solid blue;">
      header
    </div>

    <div id="content" style="width: 680px; float: left; background: white; margin-left: 185px;  min-height: 600px;  border: 1px solid lime;">
        content
    </div>

    <div id="rightcolumn" style="position: fixed; top: 10px; width: 90px; margin-left: 865px;   height: 600px;border: 1px solid maroon;">
        right
    </div>

</div> 


</body>
</html>

Width IE8, FF3 and Chrome

IE8, FF3 and Chrome http://img39.imageshack.us/img39/406/firefoxkpd.jpg

Width IE7

IE7 http://img23.imageshack.us/img23/1315/ie7l.jpg

Notes

I’m not so worried about IE6 because I know it does not support Fixed elements, but if you know how to fix it, great!

Questions

  1. What should I know about IE7 bugs to fix the problem?
  2. How can I reference the left in the header columns relatively to the wrapper
  3. Why the header column goes the the right and the right column disappears?
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Found a fix!! Strange enough floating the content to right fixes it!
    Do I earn a cookie?

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>
    test
</title>

    <!--[if lt IE 8]>

    <![endif]--> 

    <!--[if lt IE 7]>

    <![endif]--> 

</head>

<body style="margin: 10px;">
<div id="wrapper" style="width: 960px; margin: 0 auto; position: relative;  border: 1px solid red; overflow: hidden;">

    <div id="header" style="position: fixed; width: 185px; height: 600px;   top: 10px; border: 1px solid blue;">
      header
    </div>

    <div id="content" style="float: right; width: 680px; margin-right: 90px; height: 600px; border: 1px solid lime;">
        content
    </div>    

    <div id="rightcolumn" style="position: fixed; top: 10px; width: 90px; margin-left: 865px;   height: 600px;border: 1px solid maroon;">
        right
    </div>


</div> 


</body>
</html>
    • 0