The test

In this test we float a paragraph to the left and follow it by two divs. In our CSS we set all divs to be clear:left – this would cause the divs to be displayed underneath the float, not alongside. However we do want the first div to be displayed next to the float so we give it an id and apply clear:none to the id to cancel out the inherited clear:left.

This works fine in all modern browsers (Firefox, IE6, etc) but not in Safari. Safari seems to ignore the clear:none so our first div appear below the float and not next to it as desired.


<p>Some text…</p>
<div id="rich">This text should be to the right…</div>
<div>This text should be underneath…</div>

The CSS:

P {float:left; width:100px}
DIV {clear:left}
DIV#rich {clear:none}

Some text in a paragraph box.

This text should be to the right of the paragraph box.
This text should be underneath the paragraph box.