Всем привет!

Столкнулся с такой проблемой: внутри div'а находится картинка (img), далее текст или другой div. Так вот, если высота картинки больше, чем высота всего текста, эта картинка торчит из div'а и перестаёт работать свойство text-indent у div'а. Вопрос в том, как сделать, чтобы граница div'а обтекала картинку? Если задать этому div'у фиксированную высоту (а это не очень удобно, т.к. их много и у всех у них разная высота) или поместить каждый div в отдельный столбец таблици (но не хочется городить огород), то всё нормально.
Вот пример кода:

Выглядит это так:

______________________________________________
|                                                                                         | <-- граница div'а 
|    ________________                                                     |
|    |                              | Много много раз "бла-бла-бла".|
|    |                              |                                                     |
|    |                              |                                                     |
|__|                              |__________________________|
     |                              |
     |_______________|

        ^
        |
       граница img'

Ещё не пробовал, но догадываюсь, что будет. Спасибо.

Был не совсем точен:

Спасибо. Попробую.

К сожалению, вот это:

<div style="float: left; width: 100%;">

приводит к "катастрофе" в FF: div уходит за страницу вправо и следовательно части текста не видно.
Плюс, этот текст тоже нужно взять в div.

И такой вопрос: как сделать так, чтобы div, который обходит картинку справа (и в котором текст) всё время оставался одной ширины. А то, когда картинка заканчивается текст переходит под неё. А хотелось бы, чтобы это выглядело как один столбец.
Т.е.:
__________________________________________________
|    ________________   ____________________________  |
|    |                              |  |  Много много раз "бла-бла-бла".|   |
|    |                              |  |  Много много раз "бла-бла-бла".|   |
|    |                              |  |  Много много раз "бла-бла-бла".|   |
|    |_______________|  |  Много много раз "бла-бла-бла".|   |
|                                       | Много много раз "бла-бла-бла". |  |
|                                       | Много много раз "бла-бла-бла". |  |
|                                       |___________________________|  |
|_________________________________________________|

ЗЫ. Кстати, чтобы я ни делал, если включить рамку у div'ов, можно заметить, что они всё равно как-то странно расположены, особенно если один div находится в другом. Этого можно избежать, только задав фиксированные размеры, что не всегда удобно.

Это сообщение отредактировал(а) artsb - 13.9.2008, 16:59

Для этого картинка должна быть блоком (изначально это строковый элемент и как только она заканчивается, текст перестает ее обтекать)
Один из вариантов решения:

Если же для картинки тоже требуется отступы, то ее надо взять еще в один блоковый элемент.

Спасибо. Нужно попробовать.

Насколько я понял, * означает в css любой элемент.

При задании div'у  "width: 100%" в IE всё ОК, а вот в FF правый край "уходит".  Div у меня находится в ячейке таблицы.

Сделал так:






Всё ОК. Только почему-то FF не растягивает текст по ширине. У меня для всех div'ов установлен стиль:



Это можно как-то исправить?

У меня горизонтальная прокрутка не появляется даже в таком случае:

и с DOCTYPE и без.
Да, * - означает любой элемент страницы.

FF растягивает по ширине <div> :
на 100%, т.к. у них не задан "ограничивающий размер", поэтому я и предложил мультиброузерный вариант, когда используется вспомогательный <div class="wrapper"> которому принудительно задается 100% (для мультиброузерности) и потом он помещается под (над - это легко изменить) картинкой <img style="display: block;" /> отрицательным mnargin-left: -100%; а уже находящийся в нем <div class="rightcolumn"> делает отступ от своего родителя <div class="wrapper"> на величину размера <img style="display: block;">

Это сообщение отредактировал(а) webster - 14.9.2008, 14:34

Вы наверное меня не совсем поняли.

У меня FF 2.0.0.8. 
Если установить для div'а "width: 100%" - правая часть div'а уходит за границы (причём, в IE всё ОК):
_______________________
|                                           |  <- td
|   ____________________|____
|  |                                        |       |  <- div
|  |                                        |       |
|  |                                        |       |
|  |                                        |       |
| +--------------------------------+----+
|                                           |
|______________________|

Если установить для div'а "margin-left: -100%" - видно только кончики строк, торчащих слева:
_______________________
|                                           |  <- td
|________                           |
|               |  <- div                |
|               |                           |
|               |                           |
|               |                           |
|_______|                            |
|                                           |
|______________________|

И прокрутка у меня не появляется.
Дело в том, что не срабатывает свойство "text-align: justify" у div'а с текстом. Это только в FF. Не могу понять почему.
Остальное всё в порядке.

ЗЫ. объясните в чём смысл использования DOCTYPE. Спс.

DOCTYPE задает режим отображения броузером страницы, он может быть стандартным (Standart Mode), нестандартным (Quirks Mode - "изворачивающийся, подстраивающийся" режим для совместимости со старыми версиями броузеров) и для некоторых броузеров существует еще переходный.
Лучше его использовать - это дает некоторую гарантию одинакового отображения страниц практически во всех наиболее используемых броузерах.
 Нужен полный блок вашего исходного кода, желательно вместе с ячейкой таблицы. И потом, FF должен самостоятельно загружать обновления, что он регулярно и делает, в моем примере все выглядит в нем корректно.

Правая часть может уходить за пределы ячейки из-за горизонтального паддинга ячейки таблицы, или других горизонтальных отступов, надо пробовать их убирать.


Это сообщение отредактировал(а) webster - 14.9.2008, 19:04

У меня есть поля и отступы. Я, кстати, так и предпологал, что это из-за них.

А doctype лучше использовать в standart mode как я понимаю?

Я уже здесь написал о том как исправил проблему. Меня всё устраивает. Единственное, что FF почему-то не растягивает текст по ширине. Хотя это и не важно, но просто хочется чтобы всё выглядело ОК. У вас есть какие-нибудь предложения по этому поводу?

Не могли бы вы описать, что в doctype для чего и где, что нужно писать. Спс.

Список полных и правильных записей DOCTYPE вы можете посмотреть здесь. Основой его является прямая ссылка на файл DTD (определение типа документа или описание типов, используемых в документе) xhtml1-transitional.dtd (например), который определяет теги разметки, взаимоотношения тегов "родитель-потомок" и т.д.
Да, DOCTYPE как-раз и переключает в режим Standart Mode тот, или иной броузер.

Например:
так же поддерживает теги, которые являются не рекомендуемыми (Deprecated) к использованию.

Должен это делать. Попробуйте сменить тег, к которому применяется это свойство, например на <p>.