Подскажите по обтеканию..

[gard]

Здравствуйте!

Есть участок html:

<div id="footer">
	<div class="content">
		<div class="imgline">
		<img class="leftimg" src="Claim_dark_grey_on_white_01.gif">
		</div>
		<p>На иллюстрациях может быть изображено дополнительное оборудование.</p>
		<p>Материалы, размещенные на данном Сайте, предназначены для клиентов Opel в Российской Федерации и не могут быть применены вдругих странах. Opel будет прилагать все усилия, чтобы обеспечить точность и актуальность данных, содержащихся на Сайте, однако Opel не несет никакой ответственности в отношении любых претензий или убытков, понесенных в связи с использованием информации, размещенной на Сайте. Opel оставляет за собой право в любое время вносить изменения в перечень и спецификацию продукции. Для получения действительной информации о продукции просьба обращаться к официальным дилерам Opel.</p>
	</div>
</div>

Есть задачка.. <div class="imgline"> по задумке - это образно говоря "линия с картинкой", то есть картинка и рядом текст, обтекающий ее или слева или справа, у меня тут для началу применена картинка с class="leftimg", то есть она должна быть слева.. Для понятности CSS:

#footer > .content p{
margin: 0px 0px 13px 0px;
text-align: justify;
}

#footer .imgline {
clear: both;
}

#footer .imgline img.leftimg{
float: left;
overflow: hidden;
}

То есть указано, что img.leftimg будет слева, текст - справа. У меня в примере текста в блоке <div class="imgline"> нет. Для этого блока .imgline задано clear: both;, но почему выходит так, что идущие за блоком абзацы обтекают картинку, расположенную в этом блоке..

Подскажите, заранее благодарен =)

Edited September 3, 2010 by gard

[stars]

Смотрим сюда http://www.htmlbook.ru/content/?id=14

Я походу еще не проснулся но хоть убей не могу понять в чем ваша проблема с ваших слов ))) img абсолютно не обязательно оборачивать дивом, он как бы изначально не является строкой...

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

Edited September 3, 2010 by stars

[Searcher]

Я тоже не очень понял, но либо не делайте плавующей картинку, либо уберите блок .imgline и задайте картинке display:block

И еще, #footer > .content - такую запись ИЕ не понимает

[gard]

Нет это я знаю.. я наверное не так написал вопрос.. Попробую объяснить.. У меня есть блок content, в нем содержится некий контент, к примеру:

- текст

- блоки картинка-текст,

то есть примерно так должно выглядеть:

То есть блоки lineimg не должны налазить друг на друга и параграфы в content на них налазить не должны, а у меня получилось что параграф, идущий после lineimg (где пока только картинка без параграфа .lineimg .p) залез в него.. Надеюсь объяснил проблему.. =)

ps: IE6? Или все IE?

И еще для ясности, если я делаю так (добавляю любой параграф после картинки):

<div id="footer">
	<div class="content">
		<div class="imgline">
		<img src="Claim_dark_grey_on_white_01.gif">
		<p>***</p>
		</div>
		<p>На иллюстрациях может быть изображено дополнительное оборудование.</p>
		<p>Материалы, размещенные на данном Сайте, предназначены для клиентов Opel в Российской Федерации и не могут быть применены вдругих странах. Opel будет прилагать все усилия, чтобы обеспечить точность и актуальность данных, содержащихся на Сайте, однако Opel не несет никакой ответственности в отношении любых претензий или убытков, понесенных в связи с использованием информации, размещенной на Сайте. Opel оставляет за собой право в любое время вносить изменения в перечень и спецификацию продукции. Для получения действительной информации о продукции просьба обращаться к официальным дилерам Opel.</p>
	</div>
</div>

Вижу это:

Но если же параграф после картинки пуст или его вообще нет, то параграф идущий после imgline залазит и обтекает картинку как на первом рисунке..

Edited September 3, 2010 by gard

[stars]

Ну так бы и говорили... вам нужно lineimg разделить на 2 части 1 для картинки 2 для текст... Или например так:

<div class="imgline">
	<div style="height:100%;float:left;">
		<img class="leftimg" src="Claim_dark_grey_on_white_01.gif">
		<p>На иллюстрациях может быть изображено дополнительное оборудование.</p>
	</div>
</div>

[gard]

Спасибо, так и сделал, разделил на 2 части, работает, сейчас правда с полями начались странности..

[swetlana]

И еще, #footer > .content - такую запись ИЕ не понимает

Не сбивайте человека с толку.

Такую запись не понимает только IE6.

А сколько уже можно некрофилить?

Всё правильно делает товарищ.

[gard]

А можно еще вопросик, я сделал так (поменял немного названия блоков чтобы потом не путаться):

<imgtext>
   <img>
   <text>
	 <p></p>
	 <p></p>
   </text>
</imgtext>
<p></p>

Дак вот интересно что, когда я хочу изменять растояние от <imgtext> до идущего после него параграфа, то margin, примененный к .imgtext для поля снизу никакого эффекта не оказывает, оказывает только тогда, когда значение отступа больше высоты самого блока <imgtext>.. в то же время отступа от <imgtext> до параграфа можно добиться указав margin для <text>.. то есть я фактически не могу задать отступ скажем в 8px для блока <imgtext>.. почему такое происходит я что-то не догоняю..

Edited September 3, 2010 by gard

[Searcher]

если вы хотите, чтобы родитель видел плавающие блоки, то задайте ему overflow:hidden

И есть еще такая вещь - схлопывание отступов. Можно вот тут например прочитать.

[gard]

Вы меня просто спасли! Спасибо большущее!

ps: тоже думал про схлопывание, но ето не оно было..

Edited September 3, 2010 by gard

[Searcher]

Не сбивайте человека с толку.

Такую запись не понимает только IE6.

А сколько уже можно некрофилить?

Всё правильно делает товарищ.

Вообще-то полового влечения к трупам я не имею Меня еще к живым девушкам тянет... Ну а в остальном вы правы, сударыня