floating divs wrapping differently

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
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


Matt Walker

Re: floating divs wrapping differently

Quoted text here. Click to load it

That sounds hopelessly wrong of IE7.

Quoted text here. Click to load it

Just what you would expect.

Quoted text here. Click to load it

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

Quoted text here. Click to load it

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;

Site Timeline