JSFiddle - React, Tailwind, and code Playground

HTML

<title>Использование float</title>
 <body>
  <div class="col1"><h3>Меню</h3><p>Лучшие фотографии</p>
   <p>По годам</p><p>По рейтингу</p><p>По комментариям</p>
      <div class="col4"><p>Gotta out of here</p>
   </div>
     </div>

   
 
  <div class="col2">
   <div class="photo">
    <p><img src="http://cs418230.vk.me/v418230149/7ff5/J0AF8tm-A7s.jpg" alt="" /></p>
    <p class="caption">Софийский собор</p>
   </div>
   <div class="photo">
    <p><img src="http://cs418230.vk.me/v418230149/7ffc/oPjnyGkGzp0.jpg" alt="" /></p>
    <p class="caption">Польский костёл</p>
   </div><div class="clearleft"></div>
   
   <p>Новая строка</p>
  </div>
  <div class="footer">Подвал</div>
 </body>
</html>

CSS

.col1, .col2, .footer, .col4 { padding: 10px; }
   .col1 { float: left; width: 100px; background: #E8D9A9; }
   .col4 { width: 100px; background: #f00;left: -120px; top: 25px; }
   .col2 { margin-left: 120px; background: #ECC0A4; }
   .photo { width: 150px; border: 1px solid #333; text-align: center; 
    margin-right: 10px; background: #fff; float: left; }
   .clearleft { clear: left; }
   .footer { background: #9A5044; color: #fff; clear: left; }