Проблема с позиционированием элементов

[мурамаса]

Добрый день, при вертске столкнулся с такой проблемой, на первом скриншоте я старался с позиционировать элементы, что бы текст шел как бы лесенкой а между ними фото.

http://joxi.ru/D2Pz9gOTp65Z7r

Но после того как я добавляю вторую картинку элемент с текстом почему то присасывается к верхней части, хотя до этого я задал ему clear: left; что бы он расположился под первой картинкой.

После добавления картинки, получается вот так http://joxi.ru/nAyvGpPtYbzRdr

Помогите решить проблему, правильно ли вообще я позиционирую элементы на странице? или же можно решить туже задачу проще?

Html этой секции

<div class="box">
        <div class="company">
        <p>Наша компания на протяжении многих лет занимается производством
        крема из экологически чистых материалов. Мы предосталвяем широкий
        ассортимент кремов для разных целей. Именно нас на протяжении многих
        лет выбирают покупатели, потому что хотят получать результат,
        а не просто выкидывать деньги на ветер.</p>
      </div>
      <div class="company">
        <p>В наших кремах испольщуются только природные и экогологически чистые
        материалы, включая фрукты вроде кокоса или сладких личи.
        Использование подобных материалов помогает поддерживать кожу
        в здоровом виде и не допускать ее высыхания, в том числе это
        благоприятно сказывается на лечении разных кожаных болезней
        и дерматологии.</p>
      </div>

      <img src="/images/crem.png" alt="Крем фото" class="photo">

      <div class="company">
        Эмульсионные кремы бывают двух типов – масло-вода и вода-масло.
        В первом случае эмульсия имеет жидкую консистенцию и используется
        для изготовления дневных увлажняющих кремов. Благодаря высокому
        содержанию воды (до 70 процентов) они восполняют потерю влаги,
        легко наносятся, быстро впитываются, не оставляя
        жирного блеска на коже.
      </div>
     <img src="/images/crem1.png" alt="эмульсия" class="photo">

    </div>




</section>

css этой секции

.company {
  width: 450px;
  text-align: justify;
  float: left;
  font-size: 20px;
}

.company:nth-child(2) {
  width: 450px;
  text-align: justify;
  float: right;
  margin-top: 250px;
}

.company:last-child {
  float:left;
  width: 450px;
  clear: left;
}

.photo {
  float: left;
  width: 400px;
  height: 400px;
}

.photo:last-child {
  float: right;

}

 

[npofopr]

Размещайте код в песочницах, например http://jsfiddle.net 

И вторая картинка 404 выдаёт. 

[мурамаса]

Прикрепил вторую картинку, http://jsfiddle.net/rjt75oak/ вот весь код

[Switch74]

Ваш текст упирается в торчащую картинку, между парами текст+картинка ставьте элемент с clear:both

[мурамаса]

5 минут назад, Switch74 сказал:

Ваш текст упирается в торчащую картинку, между парами текст+картинка ставьте элемент с clear:both

Можно пример кода ? 
Добавил между ними div с классом clearfix, проблема решилась.. Большое спасибо за помощь!

Edited July 27, 2018 by мурамаса