Есть такой код
<img src=1.gif style='float:left'> Текст1
<img src=2.gif style='float:left'> Текст2

Если Текст1 небольшой, а окно браузера развернуто, то вторая картинка тоже начинает обтекать первую вместе с текстом1. Вопрос, как этого избежать? Заранее спасибо.

Может просто использовать <br> или разложить картинки в две разные ячейки?

Да, про ячейки чето-то я не подумал, туплю
а <br> не подходит, т.к. если окно маленькое, расстояние между картинками большое получается

Делаешь так:

Код

<div style="float: left;">    <img src="1.gif" /><br />    <img src="2.gif" /> </div> Текст1, Текст 2...

и всё нормально работает)

Это сообщение отредактировал(а) Се ля ви - 22.9.2004, 16:54

Нет так нельзя, Текст1 относится к img1, Текст2 к img2, а не 2 текста к двум рисункам.
Короче распихал все по отдельным ячейкам, правда хотелось как-то поэлегантнее.

VVp
Табличная верстка - вполне хорошее решение данной проблемы!!! :-))))

Ребята, проблема точно такая же. Имеется два дива, первый содержит картинку (float:left) и текст. Если в первом диве текста немного, текст из второго дива начинает обтекать картинку из первого. Проявляется только в Firefox. Нужно, чтобы второй див не обтекал картинку первого.

Таблицы не предлагать. Так сделаю только в том случае, если не будет найдено более элегантное решение.

Надеюсь на помощь опытных верстальщиков .

А если второй div не float'ить, а назначить ему padding слева, равный ширине первого div'а? 

Это сообщение отредактировал(а) WebDisaster - 12.7.2007, 21:37

Я конечно может чего-то не вкурил, но чем clear плох? 

Проблема решена. В IE, FF, Opera работает нормально только при таком коде:



Спасибо за советы.


Это сообщение отредактировал(а) Arien - 14.7.2007, 21:53

Присоединяюсь к недоумению Uratsakidogi...

Зачем еще какие-то сложности?

SelenIT, только вместо дивов правильнее наверное р.)

Uratsakidogi, в данном примере - согласен. А в исходнике у Arienа - кто его знает... вдруг там внутри еще какой блочный контент есть?

Специально перепроверила. Clear сам по себе не работает.

Привожу фрагмент html-кода, возможно это прояснит ситуацию:



Дело в лишних дивах, находящихся между ними?

Arien, а CSS Ваш покажите, а лучше дайте ссылку на реальную страницу (если возможно). Что-то загадочное у Вас творится .

Или попробуйте составить минимальный пример, где обтекание сохранялось бы при наличии clear и без хаков с высотой и прочих нетривиальных вещей...

Ссылку на сайт дать не могу пока, извините. Могу дать кусок css-ника, если это поможет разобраться:



Тут, скорее всего, много лишнего . Это немного модифицированный css-ник (точнее его часть) темы Bluebreeze для Drupal. Фрагмент html-кода, который использует этот css, был приведен выше в сокращенном варианте. Могу дать более полный вариант:

Arien, так проблема в том, что <div class="links"> и последующие дивы обтекают картинку из предшествующего <div class="content">? Если так, то она решается с помощью

У меня складывается устойчивое ощущение, что задачу все понимают по-разному. 

У меня, например, сложилось впечатление, что div1 должен быть слева, а div2 - справа от div1 (что бывает если div1, div2 {float: left} при фиксированной ширине div, как и показывал в своём примере топикстартер). А clear спасает положение только в том случае, если div2 выводится ниже div1. 

Что ещё раз говорит о том, что бессмысленно что-то советовать, не видя макета.



Это сообщение отредактировал(а) WebDisaster - 15.7.2007, 11:11

WebDisaster, осмелюсь заметить, что

• последние три года тут решают немного не ту задачу, что у топикстартера;
• ни в той, ни в другой задаче в упор не наблюдается div1, div2 {float: left} (!)

Что ещё раз говорит о том, что бессмысленно что-то советовать, не прочитав внимательно топик;)

ОК! Советовать больше не буду :(

WebDisaster, зачем же так радикально... Советуйте на здоровье - только будьте, плиз, впредь повнимательнее;)

Ребята, в том, что понимание проблемы у всех разное, моя вина   .

Картинка из самого первого дива должна обтекаться всеми дивами, кроме последнего (который, как и первый, <div class="content">). Проблема уже решена, хотя, возможно, и извращенным способом .

Спасибо вам за участие ;).