CSS: UL's/OL's vs. Div floating left in IE

Question

The scenario is that the client wants a floating div (the gray box) with text that wraps around it. However some of that text includes ul's and ol's, which hide behind the floating div in IE6.

I tried wrapping the ul's/ol's in a div to see if that would help, but have been unsuccessful. Has anyone experienced this problem before and found a suitable solution?

(note: This is an old site with limited ability to be able to modify much else within the layout)

[ Screenshot ]

Answer 1

However some of that text includes ul's and ol's, which hide behind the floating div in IE6.

If we're talking something as simple as this:

<div style="border: dotted red 1px; float: left; width: 100px; height: 100px">foo</div>
<p>bar</p>
<ol style="border: dotted blue 1px;">
    <li>potato</li>
    <li>yoghurt</li>
</ol>

Then what happens here happens on all browsers, not just IE. You can see it from the borders on this example: the left-padding of the list occurs behind the float, not pushing the list content further to the right. This is because floats only repel items in a line box, not block elements.

If you want a quick hack workaround, wrap the <ul> in a <div> with style ‘display: inline-block’.

Answer 2

I think you can modify the li's to display their bullets inside instead of outside and that should help you...

ul {
   list-style-position: inside;
}

Answer 3

Floating + IE6 is always a causes some unintentional pain and suffering. Some simple fixes:

1. Add more margin to the floating box
2. Add some left margin to your ul/ol