4 replies [Last post]
tgoose
Offline
Regular
Last seen: 17 years 14 weeks ago
Joined: 2004-06-19
Posts: 12
Points: 0

All,

I have a float left div and a div that is positioned to the right of it using a margin-left:200px (i.e. the width of the float).

When I view this page using IE6, as long as the page is wide enough, the two divs display beside each other. If you make the browser window smaller, the div to the right of the float moves from the top of the page to appear at the level of the bottom of the float left div.

If you view the page with other browsers (such as Mozilla, Firefox, etc.) the div on the right does not move down - it just gets "covered up".

My question is, is there any way to stop the div from moving down in IE6?

Thanks in advance,

Todd

Here is the xhtml,css for a test case:

<!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>test1</title>
<style type="text/css">
<!--
<!-- html, body {} -->
body {
padding:0;
margin:0;
background: #4D804D;
color: #000000;
}
#left {
float: left;
width: 200px;
height: 400px;
background: #f00;
}
#box {
margin-left:200px;
position:relative;
width:800px;
height:600px;
border 1px solid #000;
background-color:#ff0;
}
-->
</style>
<!-- <link href="index.css" rel="stylesheet" type="text/css" /> -->
</head>

<body>

<div id="left">left side</div>
<div id="box">
the box
</div>

</body>
</html>

tgoose
Offline
Regular
Last seen: 17 years 14 weeks ago
Joined: 2004-06-19
Posts: 12
Points: 0

div moves below float

I put my example on the web so you can just click to see it.

Here it is:

thegoosmans.com/test1.html

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 17 years 36 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

div moves below float

Add this to your css

* html, *html body {width:1020px;}

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk

tgoose
Offline
Regular
Last seen: 17 years 14 weeks ago
Joined: 2004-06-19
Posts: 12
Points: 0

div moves below float

Stu, thanks for your quick reply.

In the page that I am working on (my example was derived from it to make the question simple) I have a width:100% so that the background and some other items stretch with the page. If I use the fixed width that you suggest then width:100% is fixed to the size (in this case 1020px).

In fact, that is why I have specified the "box" as position:relative and not position:absolute which would also fix the problem. I know you couldn't know this - sorry - I've been looking at this for so long I am thinking only one way.

In the real problem because the container stretches, it is the contents that ultimately cause the jumping behavior. In the example I gave I tried to simplify things.

Thus, everyone - is there a way to stop the jumping behavior without specifying an absolute width? I figure this is a common problem that everyone avoids. I am new to css so I don't know all the tricks yet! Enlighten me!

Thanks in advance!

tgoose
Offline
Regular
Last seen: 17 years 14 weeks ago
Joined: 2004-06-19
Posts: 12
Points: 0

div moves below float

Anyone have any ideas on this problem?