title: CSS float: right not working
body: <p>On <a href="http://walks.doig.com.au/category/london/" rel="nofollow">this page</a>, I have:</p>
  
  <pre><code>&lt;div class="featured-image"&gt;
    &lt;img width="150" height="150" src="http://walks.doig.com.au/files/2014/04/london-attractions-150x150.jpg" /&gt;
  &lt;/div&gt;
  &lt;div class="walk-text"&gt;
    &lt;h2&gt;&lt;a href="http://walks.doig.com.au/london/london-2-from-the-british-museum-to-the-london-eye/"&gt;London #2 from the British Museum to the London Eye&lt;/a&gt;&lt;/h2&gt;
    &lt;div class="entry-summary"&gt;
      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non leo dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed egestas sagittis dolor eget faucibus. Aenean vestibulum sagittis purus eu venenatis. Fusce odio ligula, volutpat sed orci eget, interdum bibendum elit. Donec tempor vitae lorem sed eleifend. Donec rhoncus velit at ullamcorper egestas. Vestibulum [&amp;hellip;]&lt;/p&gt;
    &lt;/div&gt;
    &lt;!-- .entry-summary --&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p>and </p>
  
  <pre><code>.featured-image {
    float: left;
    margin-right: 14px;
    margin-right: 1rem;
  }
  .walk-text {
    float: right;
  }
  </code></pre>
  
  <p>Why isn't div.walk-text displayed on the same horizontal line as div.featured-image?</p>
  
  <p>Thanks.</p>