First issue:
At the top of http://test.qpsport.com/fr/debug.html, I have a header containing three items, a logo (H2), menu, and a selector form, all floated left. The menu is a list with individual items floated. Unless this UL is given a width, one or two browsers (notably chrome) wrap it at arbitrary places.

Experimenting has shown that in Opera, Firefox and Chrome, the width on the UL has to be [width of UL + width of H2] in order for it not to wrap. In other words, it is being measured from the left of the container. I might expect this if the leftmost float was an inline replaced element, but it makes no sense for a floated block element.

IE disagrees, so adding the 200px to the menu width makes it too wide and causes the float to drop.

Is there actually something wrong with my markup, or do I simply have to redefine the width for IE via a conditional stylesheet?

Secondly, I have a float dropping (in all browsers) in the main panel (soon to be a stepping carousel via jquery). By my maths, the two floats should fit in the available space, or am I missing somtheing?

It seems that floating ULs behave a bit strangely in some browsers. The solution that worked cross-browser was to wrap the ul in a div and float that. — Richard Grevers over 8 years ago

3 answers

If you take the width off of the <h2> and the <ul> and then float the <ul> left the top three elements should all line up correctly. This works in FF3.5 and IE7 and IE8

The <ul> is a block level element so it also needs to be floated for everything to stack up correctly

To fix the float dropping in the main panel you need to give the outer container (#mainblock) a width (1000px seems to do it) and then give the panel container (#belt) a width big enough for all of the floated panels to stack next to each other (1015px fixes the demo, but when you have more panels it will need to be wide enough for all of the panels.