floating divs wrapping differently

[Matt Walker]

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

 

[Ben C]

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;