Два HTML элемента в одном блоке — используем overflow

Для управления тем, как будет накладываться содержимое HTML элементов, расположенных в одном блоке, можно использовать CSS свойство overflow.

Чтобы показать работу overflow на примере, предположим, что у нас есть два HTML блока, расположенные в одном контейнере. В одном блоке у нас текст, во втором — изображение. В примере изображение заменено на красный квадрат, заданный свойствами CSS.

HTML код:

<div id="curtain-4325">
 <div class="img-box"></div>
 <div class="text-holder">
 ed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore ed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore ed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
 </div>
</div>

CSS стили:

#curtain-4325{
 overflow: hidden;
  width: 600px;
  margin: 0 auto 10px;
  border: 1px solid #000;
  padding: 10px;
}
.text-holder{
  overflow: hidden;
  border: 1px solid #000;
  padding: 10px;
}
.img-box{
  float: right;
  width: 60px;
  height: 60px;
  background: red;
  border: 1px solid #000;
  margin-left: 10px;
}

Выглядеть при этом блоки будут следующим образом:

Если мы уберем для класса text-holder свойство overflow, равное hidden, либо установим ему значение visible, которое используется по-умолчанию, то текст будет обтекать нашу картинку: