title: How to float image inside of div
body: <p>I have this html:</p>
  
  <pre><code>&lt;div class="speaker-list"&gt;
      &lt;div class="view-content"&gt;
          &lt;div class="views-row views-row-1 views-row-odd views-row-first"&gt;   
              &lt;div class="views-field views-field-title"&gt;
                  &lt;span class="field-content"&gt;
                      &lt;a href="/speaker/keith-anderson"&gt;Keith Anderson&lt;/a&gt;
                  &lt;/span&gt;
              &lt;/div&gt;  
              &lt;div class="views-field views-field-field-job-title"&gt;
                  &lt;div class="field-content"&gt;VP, Digital Advisory&lt;/div&gt;
              &lt;/div&gt;  
              &lt;div class="views-field views-field-field-company"&gt;
                  &lt;div class="field-content"&gt;RetailNet Group&lt;/div&gt;
              &lt;/div&gt;  
              &lt;div class="views-field views-field-title-1"&gt;
                  &lt;span class="field-content"&gt;
                      &lt;a href="/session/store"&gt;Store of the Future&lt;/a&gt;
                  &lt;/span&gt;
              &lt;/div&gt;  
              &lt;div class="views-field views-field-field-headshot"&gt;
                  &lt;div class="field-content"&gt;
                      &lt;div id="file-53" class="file file-image file-image-jpeg contextual-links-region"&gt; 
                          &lt;div class="content"&gt;
                              &lt;img typeof="foaf:Image" src="/kanderson.jpg" width="180" height="180" alt="" /&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
               &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>It's dynamically generated by a Drupal view, so I can't change the output html at all. I need to work with what is here. Here's the desired result:</p>
  
  <p><img src="https://i.stack.imgur.com/EfaOO.png" alt="enter image description here"></p>
  
  <p>Without any styling on the headshot, this is what it looks like:
  <img src="https://i.stack.imgur.com/7bX7c.png" alt="enter image description here"></p>
  
  <p>I tried to style the image to force it to float to the left of the text:</p>
  
  <pre><code>.view-speaker-list div.view-content div.views-row div.views-field
  div.field-content div.file-image div.content img {
      border: 1px solid #666;
      float: left;
      position: relative; /* tried with and without position (inc. absolute) */
      left: 30px;
  }
  </code></pre>
  
  <p>Obviously I'm doing something wrong, because this is what I get (with relative position):
  <img src="https://i.stack.imgur.com/yE8ky.png" alt="enter image description here"></p>
  
  <p>and with absolute position:
  <img src="https://i.stack.imgur.com/7Uouu.png" alt="enter image description here"></p>
  
  <p>I've also tried putting the float on the "uppermost" div class that holds the image, with no position on the div:</p>
  
  <pre><code>.view-speaker-list div.view-content div.views-row
  div.views-field-field-headshot {
      float: left;
  }
  </code></pre>
  
  <p>It gives the same result as the position: relative screenshot.</p>
  
  <p>Where am I going wrong? If I had control over the html I'd do it differently, but I'm not sure how to deal with all of these nested divs.</p>
  
  <p><strong>EDITED TO ADD NEW SCREENSHOT FOR @WEX</strong></p>
  
  <p>Here's what it looks like when I tried to use your code with the html reordered - <a href="http://jsfiddle.net/mPa7z/" rel="nofollow noreferrer">http://jsfiddle.net/mPa7z/</a></p>
  
  <p><img src="https://i.stack.imgur.com/AyP3v.png" alt="enter image description here"></p>