Декоративный блок или обтекающий текст
Недавно на форуме веб-мастеров (3wforums.ru) был поднят вопрос «как сверстать» такой макет
Основной пункт задачки — верстка должна быть резиновая и без скриптов.
Задачка интересная, т.к. и раньше мне в голову приходила подобная задачка, но по тем или иным причинам отказывался от её реализации. Хотя и данную реализацию, предложенную мною ниже, я бы в боевых условиях не использовал.
В общем вот реализация данного макета.
Реализация не идеальная, но условиям удовлетворяет. Работа проверена в FF, Opera, Хром и IE6. Конечно в осле есть небольшие недочеты, которые поправимы, но лень было править.
Так же хотелось бы обратить внимание, что вместо картинок можно попробовать использовать блоковые элементы. Мне лень было искать как картинки заменить блоками.
В голове крутиться ещё одна идея на CSS3, как полностью избавиться от картинок и сделать код семантическим, но реализуемо ли это и появится ли желание реализовать?! Время покажет.
Обновление 28.09.2011
Теперь корректно отображается и в IE6
Я использовал отступ для тэга P, внутри которого и были картинки отступов, и на которые так же подействовали отступы.
p {padding: 10px 0 0;}Перенес отступ на элемент DIV
td div {padding: 10px 0 0;}
