обтекание одного блока div другим

[stas9238 0]

Добрый день! Нужно Ваша помощь: требуется что бы один div обтекал другой!

вот код:

<div class="full-top-block">

  <div class="full-top-image">

   <img itemprop="image" src="{image-1}" alt="{title}" />

  </div>


  <div class="relative">

			[xfgiven_quality]<b>Качество:&nbsp;</b><div class="custom-label2">[xfvalue_quality]</div>[/xfgiven_quality]<br />

		<div class="fl-left"><b>Рейтинг:</b></div><div class="fl-left">{rating}</div><div class="clear_fix"></div><br/><br/>

		[xfgiven_slogan]<b>Слоган:</b> [xfvalue_slogan]<br/>[/xfgiven_slogan]

  [xfgiven_year]<b>Год выпуска:</b> [xfvalue_year]<br />[/xfgiven_year]

  [xfgiven_zanr]<b>Жанр:</b> [xfvalue_zanr]<br />[/xfgiven_zanr]

  [xfgiven_strana]<b>Страна:</b> [xfvalue_strana]<br />[/xfgiven_strana]

  [xfgiven_dlina]<b>Длина:</b> [xfvalue_dlina]<br />[/xfgiven_dlina]

   <!--noindex-->

		[xfgiven_reziser]<b>Режисер:</b> <span itemprop="director" itemscope itemtype="http://schema.org/Person"><span itemprop="name">[xfvalue_reziser]</span></span><br />[/xfgiven_reziser]


		[xfgiven_akteri]<b>В ролях:</b><span itemprop="actor" itemscope itemtype="http://schema.org/Person"><span itemprop="name"> [xfvalue_akteri]</span></span><br />[/xfgiven_akteri] <!--noindex-->

	<br />

		{full-story}


			</div>


</div>

Сайт

Вот как нужно:

Спасибо за помощь!

Изменено 18 января 2015 пользователем stas9238

[odys 384]

stas9238, для .full-top-image в .css добавь float:left; и размести его в пределах <div class="relative"> , где идёт всё описание фильма

[stas9238 0]

stas9238, для .full-top-image в .css добавь float:left; и размести его в пределах <div class="relative"> , где идёт всё описание фильма

у меня они сейчас так расположены

<div class="full-top-block">

	<div class="full-top-image"></div>

	<div class="relative"></div>

</div>

{full-story} (описание) находится в relative

Изменено 20 января 2015 пользователем stas9238

[odys 384]

stas9238,

<div class="full-top-block">

    <div class="relative">

        <div class="full-top-image"></div>

    </div>

</div>

и для .full-top-image добавить float:left;

[stas9238 0]

stas9238,

<div class="full-top-block">

	<div class="relative">

		<div class="full-top-image"></div>

	</div>

</div>

и для .full-top-image добавить float:left;

у меня для него и так стоит float:left; Вот:

<div class="full-top-block">

   <div class="full-top-image">

   <img itemprop="image" src="{image-1}" alt="{title}" />

  </div>


  <div class="relative">

		[xfgiven_name]<b>Название:</b> [xfvalue_name]<br/>[/xfgiven_name]

		[xfgiven_slogan]<b>Слоган:</b> [xfvalue_slogan]<br/>[/xfgiven_slogan]

  [xfgiven_year]<b>Год выпуска:</b> [xfvalue_year]<br />[/xfgiven_year]

  [xfgiven_zanr]<b>Жанр:</b> [xfvalue_zanr]<br />[/xfgiven_zanr]

  [xfgiven_strana]<b>Страна:</b> [xfvalue_strana]<br />[/xfgiven_strana]

  [xfgiven_dlina]<b>Длина:</b> [xfvalue_dlina]<br />[/xfgiven_dlina]

   <!--noindex-->

		[xfgiven_reziser]<b>Режисер:</b> <span itemprop="director" itemscope itemtype="http://schema.org/Person"><span itemprop="name">[xfvalue_reziser]</span></span><br />[/xfgiven_reziser]

  [xfgiven_akteri]<b>В ролях:</b><span itemprop="actor" itemscope itemtype="http://schema.org/Person"><span itemprop="name"> [xfvalue_akteri]</span></span><br />[/xfgiven_akteri] <!--noindex-->

	<br />  

			   &nbsp;&nbsp;&nbsp;&nbsp;{full-story}

			</div>

</div>

.full-top-block{

  position: relative;

  margin: 0 0 20px 20px;

}


  .full-top-image{

   position: relative;

   width: 320px;

   float:left;

   overflow: hidden;

  }


.relative{

  width: 400px;

  height: 450px;

  position: absolute;

  top: 0px;

  right: 10px;

http://kino-maniac.ru/135-spartak-krov-i-pesok-sezon-2.html

Изменено 20 января 2015 пользователем stas9238

[odys 384]

stas9238, я не смотрел твой .css, если брать во внимание его, тогда нужно полностью вёрстку этой части переписать. Обтикание div ни чем не отличается от аналогичного обтикание картинки,

принцип довольно простй:

<div style="width:400px;">

<div style="width:200px;height:100px;background:#ddd;float:left;"></div>

<div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a pulvinar metus, sed viverra metus.

Sed sodales euismod arcu, pulvinar ultricies orci interdum lobortis. Ut vel dui ultrices, tincidunt

lorem in, faucibus augue. Duis sed aliquet mi. Aenean a aliquet lacus, quis suscipit erat. Vivamus

a ex ac erat placerat egestas. Mauris scelerisque velit sit amet fringilla maximus. Cum sociis natoque

penatibus et magnis dis parturient montes, nascetur ridiculus mus.

</div>

</div>

сохрани через блокнот как .html и открой этот файл через браузер

[Lina_Varfolomeeva 0]

Вы абсолютно правы. В этом что-то есть и идея отличная, согласен с Вами.