First issue: At the top of, 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

danwellman 5600

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.

Answered over 8 years ago by danwellman

Float the ul. Should work.

Answered over 8 years ago by Alexandru Bucur

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.

Answered over 8 years ago by Tony Crockford
  • I took too long to compose my answer it seems. sorry for duplicating. Tony Crockford over 8 years ago