Плавающие элементы вокруг предыдущего элемента в разметке

Question

У меня есть довольно простая разметка для заголовка, изображения и текста ( пример ):

<div>
  <h1>
  <img>
  <p>
</div>

Я хотел бы поместить изображение слева от предыдущего заголовка и последующего абзаца без изменения HTML.

В идеале я бы просто поместил изображение слева:

img {
  float: left;
}

Но поскольку заголовок появляется перед изображением в разметке, заголовок будет охватывать весь контейнер:

/-----------------------------------------\
| Header Header Header                    |
| |-------|                               |
| |-Image-|  Paragraph text               |
| |-------|  Paragraph text               |
| |-------|  Paragraph text               |
\-----------------------------------------/

Мне бы хотелось, чтобы это выглядело так:

/-----------------------------------------\
| |-------|  Header Header Header         |
| |-------|                               |
| |-Image-|  Paragraph text               |
| |-------|  Paragraph text               |
| |-------|  Paragraph text               |
\-----------------------------------------/

Мои усилия до сих пор (Дабблет)

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

Answer 1

Вот мое решение.

Вы можете найти его здесь: http://jsfiddle.net/gHNdJ/

Надеюсь, это то, что вы ищете.

Примечание: если вывсе же хочу сохранить HTML таким, решение первого ответа пока лучшее.но я не люблю использовать позиционирование.

Answer 2

Вот один из возможных способов .

Разметка:

<div>
    <h2>This is my title</h2>
    <img src="http://dummyimage.com/320x200/ff00ff/fff&text=woooo!" alt="sample" />
    <p>I'd like to float the image left of both the preceding header and the succeeding paragraph, without changing the HTML. I'd like to float the image left of both the preceding header and the succeeding paragraph, without changing the HTML. I'd like to float the image left of both the preceding header and the succeeding paragraph, without changing the HTML. I'd like to float the image left of both the preceding header and the succeeding paragraph, without changing the HTML.</p>
</div>

CSS:

div { position: relative; }
img { float: left; margin-right: 20px; }
p { position: relative; top: 24px; }
h2 { position: absolute; left: 340px; font-weight: bold; }

Визуальный пример (в Firefox):