Порядок divs, vs css float left & right

Question

Я пытаюсь подстроить некоторый HTML (который был сгенерирован ужасным PHP-скриптом, который я не хочу futz, если я могу его избежать), который имеет по существу следующий структура.

<div class="outer"> 
    <div class="imageContainer"><img src="image42.png" /></div> 
    <h1>The Title String</h1> 
    <div class="description">Lorem ipsum dolor sit amet, ... </div> 
    <div class="details">These are the details...</div> 
</div> 

Я хочу div.imageContainer плавать слева, и div.details плавать правильно, с текстовым описанием, стекающей между ними (а затем по изображению слева, если есть много текста описания).

Следующая CSS получает право div.imageContainer и div.description, но ставит div.details ниже и справа от описания, глядя, как если бы он был дан "clear:left" (в действительности, он падает полностью вне div.outer):

.imageContainer { float: left; } 
.description { width: 50%; } 
.details  { width: 50%; 
        float: right; } 

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

.outer   { overflow: hidden; } 

который удлиняет div.outer, так что он охватывает div.details - но оставляет div.details в том же положении относительно div.description.

В моем примере HTML, я нахожу, что если я обмениваюсь порядком тегов div.description и div.details, я получаю его точно так, как хочу. Это замечательно, поскольку пример идет, но не помогает мне вникать в мужество этого вопиющего ужасного PHP-кода, который генерирует HTML-код, который действительно действительно хочет стиль. : -/

Есть ли способ для меня сделать это с помощью только CSS?

(я понимаю, что я могу играть на скрипке в DOM с JavaScript/JQuery, но кажется, что запутано мне.)

Answer 1

Я создал в JSBin.com в sample для вашего запроса.

В образце я применил стиль float:left; к элементу div.description и очищенный плавающий элемент для элемента div.outer.

Проверьте обновленный источник here