См. Разметку + CSS ниже или эту скрипку:
http://jsfiddle.net/gq9w6/15/ ... в IE7 (или в представлении совместимости IE8 / 9)
Текст "Lorem ipsum" должен быть обернут вокруг обоих div # 1 и # 3, но в IE7 он очищает div # 1.
Как мне заставить IE7 вести себя в этом сценарии?
HTML:
<div id="div1">Feature image</div>
<div id="div2">
<div id="div4" class="a">fb like</div>
<div id="div5" class="a">g-plus1</div>
<div id="div5" class="a">tweet</div>
</div>
<div id="div3">related topics list</div>
<div id="div7">bi-line</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
CSS:
#div1{border:1px dotted green;float:left;width:100px;height:100px;}
#div2{height:15px;}
#div3{float:right;clear:both;width:100px;height:30px;border:1px dotted green;}
.a{float:left;width:70px;border:1px dotted red;}
#div7{text-align:left;}
UPDATE:
HTML / CSS и fiddle to (/ 14) обновлены с помощью образца текста, который показывает цель каждого раздела.
UPDATE
Письменное описание требований:
- Показанное изображение всплыло влево
- Ряд кнопок общего доступа к социальным сетям справа от изображения, в горизонтальном ряду с верхом ряда, выровненным по верху показанного изображения
- подстрочный знак под кнопками социальных сетей (они неправильно упаковываются в скрипку, но не берите в голову, это легко исправить)
- Виджет «связанные темы» перемещается вправо, очищая выделенное изображение (верхний край первого совпадает с нижним краем последнего)
- текст статьи, начинающийся под строкой, обернутый вокруг остальной части избранного изображения, а также виджет связанных тем