Posted by patrick j on 03/08/07 13:59

Hi

I'm wondering if a mystery could be solved. I'm creating a web-site for
some friends at the moment and I can't work out the behaviour of the
elements within it in IE6 and IE7.

Because the web-site is (for me) complicated made up of many files I have
created a very simple web-page which illustrates the problem.

Here is the URL:

<http://www.patrickjames.me.uk/test.html>

What you will see is somewhat garish. There are three divs.

number1 - is a green box floated to the left width 180px

number2 - has a border 1px solid black a left margins of 200px and
contains...

number 3 - which is a yellow box width 500px.

Okay number1 as you've guessed is sitting happily in the margin of number 2
on the left. Then number3 sits quite contentedly inside number2.

With FireFox or Safari when I narrow the viewport to less than 700px all is
as I'd expect, number3 stays where it is but the right side of it
disappears outside the viewport.

With IE6 and IE7 however narrowing viewport to less than 700px means that
number3 (the yellow box) jumps down to below number1 (the green box). I
can't understand why it would do this as the margin of number2 is wider
than number3 and the is no "gain" to number3 going below number1 in this
way as it moves no further left.

I'd be grateful if someone would explain what I could do to get these divs
to behave in IE6 and IE7 as they do in FireFox and Safari.

Thank you :)
--
Patrick
Brighton, UK
If you wish you can email me from web-site.
<http://www.patrickjames.me.uk>

[Back to original message]