Обтекание блока

Свойство float задаёт обтекание элементов, устанавливаемое его параметрами.

Выравнивание элементов задаётся следующим образом:


float : left;
float : right;
float : none;

left – устанавливает обтекание по левому краю

right – устанавливает обтекание по правому краю

none – отменяет обтекание элемента


HTML

<div class="container">

  <div class="part">
    <div class="box chocolate">
      &nbsp;
    </div>
  </div>
  
  <div class="part">
    <div class="box orange">
      &nbsp;
    </div>
  </div>
  
  <div class="part">
    <div class="box gold">
      &nbsp;
    </div>
  </div>
  
</div>


CSS

.container{
    display: table;
    overflow: hidden;
    margin: 50px auto;
}
.container .part{
    float: left;
    width: 33.333%;
}
.box{
    width: 150px;
    height: 100px;
    margin: 0px auto;
}
.gold {
    background-color: gold;
}
.orange{
    background-color: orange;
}
.chocolate{
    background-color: chocolate;
}


HTML

<div class="content-field">

  <div class="text-box">
    Cras molestie id lectus sit amet laoreet.
    Aenean posuere pulvinar vestibulum.
  </div>

  <p>
    Sed eleifend nulla a posuere efficitur.
    Pellentesque habitant morbi tristique senectus
    et netus et malesuada fames ac turpis egestas.
    Donec cursus euismod odio, et tincidunt ipsum
    rhoncus vel. Mauris vehicula erat odio, non 
    molestie metus rhoncus at. Aliquam sit amet 
    dignissim erat. Phasellus rutrum pellentesque 
    tortor, aliquet ornare lectus feugiat nec. 
    Quisque hendrerit molestie eros, ac porttitor
    mi consectetur vel. Duis at tortor a enim 
    tristique fermentum sit amet id velit.
  </p>

</div>


CSS

.content-field {
    overflow: hidden;
    margin: 0px auto;
    max-width: 500px;	
}
.text-box {
    width: 35%;
    float: left;
    padding: 20px;
    margin-top: 20px;
    margin-right: 20px;
    background-color: #fC0;
    border: 1px solid #333;
}