Prevent floated image from clearing <p> in ie6

Question

I am making a WYSIWYG webpage editor: http://brokenmyriad.com/editor2.php, however I have come across a problem when trying to add image functionality.

Note: the image is not inside a contenteditable element, but is just a normal floated image.

The problem can be recreated by clicking into either the paragraph or the heading and the clicking the insert image button on the toolar (the far right button). (on the above linked page).

In standards based browsers it works as expected, and the heading and the paragraph are both to the right of the image, however in ie6 the paragraph is under the floated image like in this picture: http://tinypic.com/view.php?pic=2mfcfo8&amp;s=3

My simplified code structure is as follows:

<div>
  <img style='float:left'>
  <h1>Click here to edit!</h1> 
</div>
<div>
  <p>Click here to edit!</p> 
</div>

What I want is for the <p> element to be alongside the floated image, and under the <h1> element as it is in standards based browsers.

Any help would be greatly appreciated!

Answer 1

Your second div should be floated left:

<div>
   <img style='float:left'>
   <h1>Click here to edit!</h1> 
</div>

<div style="float:left;">
    <p>Click here to edit!</p> 
</div>

Answer 2

Why is the paragraph in a separate div? Wouldn't the following work:

<div>
    <img style='float:left'>
    <h1>Click here to edit!</h1> 
    <p>Click here to edit!</p> 
</div>

If you must have the divs, then the second one needs to be nested

<div style="float: left;">
    <img style='float:left'>
    <h1>Click here to edit!</h1> 
    <div style="float: left;">
        <p>Click here to edit!</p> 
    </div>
</div>