ansaurus

Question

Answer 1

A:

What about this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<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="float: left; width: 185px;  height: 600px;      top: 10px;      border: 1px solid blue;">
      header
    </div>

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

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

</div> 
</body>
</html>

It works on IE7, Firefox, Opera, Safari and Chrome. I guess it will work in IE6 and IE8 too. I had to reduce the width of the "content" because the (rightcolumn+content+header) < wrapper

Diego Jancic 2009-08-04 16:40:56

I didn't used "fixed" divs, but I guess that it's not a must if it works. Is it?

Diego Jancic 2009-08-04 16:42:12

Your solution failed to render properly. I tried it on a 24" monitor running IE7. There is an extra right hand column.

Molex 2009-08-04 16:49:30

It's not an extra right column, it's the wrapper which is bigger than all the child divs. (185+650+90)=925 > 960

Diego Jancic 2009-08-04 17:00:28

Sorry If I wasn't clear, I **need** the fixed divs

Eduardo Molteni 2009-08-04 17:10:48

Answer 2

A:

The fixed position doesn't work in older browsers. You can float the elements beside each other.

Specify a zero padding for the body also, Opera uses a default padding instead of margin (which actually makes more sense).

I put the styles in a style sheet to make the code cleaner:

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

<style type="text/css">
body { margin: 10px; padding: 0; }
#wrapper { width: 960px; margin: 0 auto; border: 1px solid red; overflow: hidden; }
#header { float: left; width: 185px; height: 600px; border: 1px solid blue; }
#content { float: left; width: 680px; background: white; min-height: 600px; border: 1px solid lime; }
#rightcolumn { float: left; width: 89px; height: 600px; border: 1px solid maroon; }
</style>

</head>
<body>

<div id="wrapper">
   <div id="header">
      header
   </div>
   <div id="content">
      content
   </div>
   <div id="rightcolumn">
      right
   </div>
</div> 

</body>
</html>

Guffa 2009-08-04 16:47:32

The problem is with the *fixed* columns. I do not consider IE7 an "older browser" and it supports Fixed divs (or at least that is what the manual says)

Eduardo Molteni 2009-08-04 17:13:44

Answer 3

A:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<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="width: 185px; float: left;  height: 600px;      top: 10px;      border: 1px solid blue;">
      header
    </div>

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

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

</div> 


</body>
</html>

That should do it!

Molex 2009-08-04 16:59:29

Sorry If I wasn't clear, I **need** the fixed divs

Eduardo Molteni 2009-08-04 17:17:36

Answer 4

A:

If script-based solutions are acceptable, then I have had some success with fixed divs (not necessarily using the layout you have) using Dean Edwards' upgrade scripts which patch IE behaviours to be more like the standards indicate.

Steve Gilham 2009-08-04 17:26:00

I tried it, but does not work. The thing is that allegedly IE7 supports Fixed DIVs, but don't know how to keep the header on the left and the right column on the right.

Eduardo Molteni 2009-08-04 17:35:46

Answer 5

A:

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"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<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>

Eduardo Molteni 2009-08-04 18:36:07

ansaurus

tags:

views:

answers:

IE7 and fixed divs problem

related questions