Как мне разместить два элемента различной ширины слева от одного большого блока текста?

Question

У меня есть статья в блоге, которая состоит из трех элементов: 1) миниатюра поста, 2) окно социальной сети и 3) текст статьи. Я хочу, чтобы текст всплывал слева от миниатюры (достаточно легко), и я также хочу, чтобы текст всплывал слева от поля соцсетей, а поле соцсетей отображается под миниатюрой. Еще один способ сказать, что я хочу, чтобы миниатюра располагалась над окном социальных сетей, но текст статьи должен располагаться слева от них обоих. Проблема в том, что миниатюра шире, чем в окне социальных сетей, а справа от поля для социальных сетей имеется большой пробел, чтобы компенсировать ширину миниатюры. Как заставить текст плавать слева от обоих элементов и плотно прилегать к обоим элементам?

Мой код доступен в jsFiddle

Answer 1

Вы можете получить текст, чтобы обернуть каждый элемент боковой панели по отдельности, поместив их отдельно, вместо того, чтобы обернуть все элементы в плавающий элемент div:

.article-image, .sharebox-outer {
    clear: left;
    float: left;
}

jsFiddle

Answer 2

Дайте определенную ширину, чтобы она заполнила весь содержащий div, толкая всплывающее окно соцсетей вниз.

h2.gentesque { float:left; width: 500px; }
.article-image { float:left; width: /* whatever width */ }