floating divs wrapping differently

Discussion in 'HTML' started by Matt Walker, Apr 2, 2007.

  1. Matt Walker

    Matt Walker Guest

    Hi group,

    I'm working on this website http://www.urbancircus.com.au/html/projects.html
    and I'm noticing something a bit odd. When I resize my window so that
    there isn't enough room for the logo and the menu in the header
    section to sit side by side, I get different behaviours depending on
    which browser I'm using.

    In IE7 the text maintains its position to the right of the logo but
    wraps within its inline style tag.

    In Firefox the text gets bumped down to the next line (below the logo)
    and then begins to wrap from that position.

    I would have thought my div tag structure would have prevented this
    from happening (particularly because the menu text in firefox wraps
    over the top of a div tag on the same level div id="mainbodysection">)

    Can anyone help me replicate the behaviour of IE7 in firefox for that
    menu text using css.

    P.S. Firebug is your friend for on the fly css testing in firefox
    www.getfirebug.com

    Cheers

    Matt Walker
     
    Matt Walker, Apr 2, 2007
    #1
    1. Advertising

  2. Matt Walker

    Ben C Guest

    On 2007-04-02, Matt Walker <> wrote:
    > Hi group,
    >
    > I'm working on this website http://www.urbancircus.com.au/html/projects.html
    > and I'm noticing something a bit odd. When I resize my window so that
    > there isn't enough room for the logo and the menu in the header
    > section to sit side by side, I get different behaviours depending on
    > which browser I'm using.
    >
    > In IE7 the text maintains its position to the right of the logo but
    > wraps within its inline style tag.


    That sounds hopelessly wrong of IE7.

    > In Firefox the text gets bumped down to the next line (below the logo)
    > and then begins to wrap from that position.


    Just what you would expect.

    > I would have thought my div tag structure would have prevented this
    > from happening (particularly because the menu text in firefox wraps
    > over the top of a div tag on the same level div id="mainbodysection">)


    I don't really understand what you're saying there. Which menu text?

    > Can anyone help me replicate the behaviour of IE7 in firefox for that
    > menu text using css.


    Sounds like you want absolute positioning. Make the thing on the right,
    instead of floated:

    position: absolute;
    text-align: right;
    right: 0;
    left: 162px; /* whatever the width of Circus_Logo_small.jpg is */
    top: 0;
     
    Ben C, Apr 3, 2007
    #2
    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. =?ISO-8859-1?Q?Tom=E1=9A_Bedn=E1=F8?=

    DIVs floating to left display incorrect if IE4

    =?ISO-8859-1?Q?Tom=E1=9A_Bedn=E1=F8?=, Oct 23, 2003, in forum: HTML
    Replies:
    2
    Views:
    538
    Toby A Inkster
    Oct 24, 2003
  2. Nik Coughin

    Wrapping divs

    Nik Coughin, Feb 28, 2004, in forum: HTML
    Replies:
    6
    Views:
    1,433
    Paul Furman
    Mar 1, 2004
  3. Jeff Bowman

    Way to stop DIVs from wrapping?

    Jeff Bowman, Apr 14, 2005, in forum: HTML
    Replies:
    5
    Views:
    14,887
    Jeff Bowman
    Apr 16, 2005
  4. rich
    Replies:
    0
    Views:
    741
  5. maya
    Replies:
    4
    Views:
    253
Loading...

Share This Page