Simple DIV layout, all browser ok except IE - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

Simple DIV layout, all browser ok except IE

kitesurf

5:45 pm on Feb 6, 2009 (gmt 0)

10+ Year Member

Hi!

I have a really odd positioning problem between IE and all the other browsers. For some reason IE thinks differently, here is the 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Position testing</title>
<style type="text/css">
body {
#absolute {
position:absolute;
width:100px;
height:100px;
background-color:#000099;
color:white;
overflow:auto;
}
#float {
float:left;
width:200px;
color:white;
background-color:#6699FF;
padding-top:200px;
overflow:auto;
}
</style>
</head>

<body>
<div>
<div id="absolute">absolute</div>
<div id="float">float</div>
</div>
</body>
</html>

In FF and all other browsers, the absolute DIV is layered on top of the float div, but in IE it positions it AFTER the float div (to the right).

Can anyone spot why? I am sure there is a reason for this, but just can't find it!

help!

Thanks
Phil

Thank you!

oluoch28394

6:57 pm on Feb 6, 2009 (gmt 0)

10+ Year Member

You have an open bracket, body { , so the #absolute style is not being read. Also you do not need the position:absolute;

try this it works for me.

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Position testing</title>
<style type="text/css">
#absolute {
width:100px;
height:100px;
background-color:#000099;
color:white;
overflow:auto;
}
#float {
float:left;
width:200px;
color:white;
background-color:#6699FF;
padding-top:200px;
overflow:auto;
}
</style>
</head>

<body>
<div>
<div id="absolute">absolute</div>
<div id="float">float</div>
</div>
</body>
</html>

Btw, I'm a newbie so take my advice with a grain of salt.

kitesurf

7:08 pm on Feb 6, 2009 (gmt 0)

10+ Year Member

thanks for your response and pointing out the incomplete body tag.

The reason I am using position:absolute on the "absolute" div is to stack the absolute DIV on top of the floated div:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Position testing</title>
<style type="text/css">
#absolute {
position:absolute;
width:100px;
height:100px;
background-color:#000099;
color:white;
overflow:auto;
}
#float {
float:left;
width:200px;
color:white;
background-color:#6699FF;
padding-top:200px;
overflow:auto;
}
</style>
</head>

<body>
<div>
<div id="absolute">absolute</div>
<div id="float">float</div>
</div>
</body>
</html>

All browsers except IE start positioning the absolute DIV from the top left of the page. IE starts positioning it after the floated DIV which just doesn't make sense to me.

Any other ideas?

oluoch28394

12:47 am on Feb 8, 2009 (gmt 0)

10+ Year Member

It was in the right place for me without using position:absolute; I checked using IE6 and Firefox3.0.6.
If u wanna use position:absolute; I think you have to specify the position, eg. top:0px; left:0px; would place it in the top left corner of the element.

g1smd

1:50 am on Feb 8, 2009 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

On floats I often find that adding

position:relative

helps a lot.

Other times,

clear:both

is needed someplace nearby.