The tale of three divs

[patrick j]

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

 

[Jim Moe]

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.

IE does not do well when 100% of a width is used. It has rounding
errors, it does not include the border width, etc., and it incorrectly
resizes a <div>'s width to accommodate its contents.
In your case it stops reducing the size of the div as the viewport width
decreases until reaches the size of div.number3, then decides there is not
enough room for number3 and drops it down.
Change the width of "number3" to 99%, rather than 500px.

 

[patrick j]

IE does not do well when 100% of a width is used. It has rounding
errors, it does not include the border width, etc., and it incorrectly
resizes a <div>'s width to accommodate its contents.
In your case it stops reducing the size of the div as the viewport width
decreases until reaches the size of div.number3, then decides there is not
enough room for number3 and drops it down.
Change the width of "number3" to 99%, rather than 500px.

Thank you for your help. In the real web-page "number3" is an image. That's
why I created a "fixed size" for "number3" in this demonstration web-page.