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?
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
<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.
Float the ul. Should work.
A quick look suggests that while your li's are floated the ul isn't and has a width and a right margin that are almost as wide as the wrapper.
float the ul (or add overflow:hidden), so it shrink-wraps the li's, reduce the right margin and add display:inline to the h2 and the ul to prevent some doubled margin float bugs in IE
if you float the h2 and the ul inside the wrapper then their combined widths , margins and padding should be less than the wrapper width.
What you currently have is two vertically stacked floated elements (the h2 and the ul) but the content of the ul floats to clear the h2. (try putting a border on the ul to see what I mean)
IE is putting the two side by side instead, hence the ul is too wide.