Иногда, особенно при оформлении промо-страничек, так и хочется сдалать «журнальную» обложку с текстом заметки, который обтекает иллюстрацию. Многие верстальщики, видя такое, сразу говорят, что это невозможно. Однако, немного подумав, сверстать «как в журнале» можно.
Если картинка прямоугольная, то решается наша задача довольно просто. Свойство float с соответствующим значением left или right вполне решает нашу проблему. Но что же нам делать с яблоком?!
На самом деле наше яблоко почти ничем не отличается от прямоугольного… разве что прямоугольник получается не один.
Текст будет идти в две колонки, поэтому мы делим яблоко на две части. Далее сверху вниз у нас выходят отступы с разной шириной. На каждый из таких отступов заводим отдельный элемент div. Сразу после блоков- отступов размещаем текст.
Для лучшего понимания можно навести мышь на яблоко и посмотреть код.