Обтекание текста вокруг div

Question

У меня есть такой макет:

Header div
divLeft divRight
Footer div

divLeft - это набор текста, а divRight - это div с некоторыми элементами. divLeft намного длиннее, и я хотел бы, чтобы текст был перенесен на divright. сейчас он просто создает две колонки и в divRight много пустого пространства. Помогите? Спасибо!

Answer 1

Поместите divRight внутрь divLeft и выпустите его.

Попробуйте это:

CSS

<style type="text/css">
#primary, #header, #footer {
    float: left;
    width: 100%;
}

#secondary {
   float: right;
      width: 200px; /* or whatever width you want */
}
</style>

HTML

<div id="header">
</div>
<div id="primary">
   <div id="secondary">
      <p>Put your content here that goes on the right</p>
   </div>
   <p>Put your content here<br /> 
      that goes on the left<br /> 
      and should wrap under the right-hand column</p>
</div>
<div id="footer">
</div>

Answer 2

Поместите divRight внутри divLeft и присвойте ему следующие свойства:

.divRight {
    display: inline-block;
    display: -moz-inline-box;
    -moz-box-orient: vertical;
    vertical-align: top;
    zoom: 1;
    *display: inline;
}

Answer 3

У меня есть очень хорошее решение; взгляните на источник примера здесь .

Answer 4

Вы можете всплывать divRight вправо. Это должно позволить левому элементу div обернуться под правым текстом.

Редактировать: Вам также понадобится divRight внутри divLeft, как описано Donut.