Предотвратить очистку плавающего изображения <p>в ie6

Question

Я делаю WYSIWYG-редактор веб-страниц: http://brokenmyriad.com/editor2.php,, однако я столкнулся с проблемой при попытке добавить функциональность изображения.

Примечание: изображение не внутри contenteditable элемента, а просто обычное плавающее изображение.

Проблема может быть воссоздана путем нажатия либо на абзац, либо на заголовок и нажатия кнопки вставки изображения на панели инструментов (крайняя правая кнопка). (на вышеуказанной связанной странице).

В браузерах, основанных на стандартах, он работает должным образом, и заголовок и абзац находятся справа от изображения, однако в ie6 абзац находится под плавающим изображением, как на этом рисунке: http://tinypic.com/view.php?pic=2mfcfo8&s=3

Моя упрощенная структура кода выглядит следующим образом:

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

Я хочу, чтобы элемент <p> находился рядом с плавающим изображением и находился под элементом <h1>, как в стандартных браузерах.

Любая помощь будет принята с благодарностью!

Answer 1

Почему абзац в отдельном div?Не сработает ли следующее:

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

Если у вас есть div, тогда второй должен быть вложен

Answer 2

Оказалось, что у элементов

было width:100%, что приводило к ошибке.

Answer 3

Ваш второй div должен быть плавающим влево:

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

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