title: How to correctly float an image to the left when placed in a sequence of divs
body: <p>I'm trying to display a sequence of divs in html.</p>
  
  <p>Each div has an image that I want to take up on the left. Each div will also have a set of information of varying length that I want to display to the right of that image.</p>
  
  <p>The problem I'm having is that the images being floated to the left are catching on each other. What I want is for each .item div to display in sequence down the page, but instead they crawl slowly to the right as each image catches on itself.</p>
  
  <p>Note that in the real-world example this is based on, the heights of the images and the number of the lines in the details section may vary, so it is not known ahead of time which of the two will be longer than the other for any given .item div.</p>
  
  <p>I'm sure I used to know how to do this, but for the life of me I can't work it out. I'm either stupid or merely in very bad need of caffeine. It's clearly been far too long since I dabbled in web design.</p>
  
  <p>Sample code below.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Float Left Sample&lt;/title&gt;
  &lt;style&gt;
      .sidebar { 
          float: left; 
      }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="container"&gt;
          &lt;div class="item"&gt;
              &lt;div class="sidebar"&gt;
                  &lt;img src="https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png" alt="Sample Image" /&gt;
              &lt;/div&gt;
              &lt;div class="details"&gt;
                  &lt;div&gt;Details Line One&lt;/div&gt;
                  &lt;div&gt;Details Line Two&lt;/div&gt;
                  &lt;div&gt;Details Line Three&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="item"&gt;
              &lt;div class="sidebar"&gt;
                  &lt;img src="https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png" alt="Sample Image" /&gt;
              &lt;/div&gt;
              &lt;div class="details"&gt;
                  &lt;div&gt;Details Line One&lt;/div&gt;
                  &lt;div&gt;Details Line Two&lt;/div&gt;
                  &lt;div&gt;Details Line Three&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="item"&gt;
              &lt;div class="sidebar"&gt;
                  &lt;img src="https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png" alt="Sample Image" /&gt;
              &lt;/div&gt;
              &lt;div class="details"&gt;
                  &lt;div&gt;Details Line One&lt;/div&gt;
                  &lt;div&gt;Details Line Two&lt;/div&gt;
                  &lt;div&gt;Details Line Three&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="item"&gt;
              &lt;div class="sidebar"&gt;
                  &lt;img src="https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png" alt="Sample Image" /&gt;
              &lt;/div&gt;
              &lt;div class="details"&gt;
                  &lt;div&gt;Details Line One&lt;/div&gt;
                  &lt;div&gt;Details Line Two&lt;/div&gt;
                  &lt;div&gt;Details Line Three&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>