The tale of three divs

Discussion in 'HTML' started by patrick j, Mar 8, 2007.

  1. patrick j

    patrick j Guest

    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>
     
    patrick j, Mar 8, 2007
    #1
    1. Advertising

  2. patrick j

    Jim Moe Guest

    patrick j wrote:
    >
    > 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.

    --
    jmm (hyphen) list (at) sohnen-moe (dot) com
    (Remove .AXSPAMGN for email)
     
    Jim Moe, Mar 8, 2007
    #2
    1. Advertising

  3. patrick j

    patrick j Guest

    On Mar 8, 2007 Jim Moe wrote:

    > patrick j wrote:
    >>
    >> 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.
    >
    >


    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.

    --
    Patrick
    Brighton, UK
    If you wish you can email me from web-site.
    <http://www.patrickjames.me.uk>
     
    patrick j, Mar 8, 2007
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Replies:
    10
    Views:
    557
    Otis Mukinfus
    Apr 15, 2006
  2. Replies:
    10
    Views:
    1,187
  3. Joel Seligmann

    Tell-tale Blue Borders: Help!

    Joel Seligmann, Dec 28, 2003, in forum: HTML
    Replies:
    15
    Views:
    2,384
    Adrian Wood
    Mar 5, 2004
  4. rich
    Replies:
    0
    Views:
    724
  5. maya
    Replies:
    4
    Views:
    242
Loading...

Share This Page