title: CSS background image disappears when float property is set to 'none'
body: <p>I have a series of three boxes, each approximately one-third of the screen width. The first two boxes have widths of 33.333% and are floated left. I've removed the float on the third box and set the width to <code>auto</code> so that it fills the remaining horizontal space. However, doing so causes the background image to disappear. I've created a <a href="http://jsfiddle.net/aMwk9/" rel="nofollow">Fiddle</a> demonstrating this effect.</p>
  
  <p>The HTML is very simple:</p>
  
  <pre><code>&lt;div&gt;&lt;/div&gt;
  &lt;div&gt;&lt;/div&gt;
  &lt;div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>And here's the CSS:</p>
  
  <pre><code>div {
    float: left;
    width: 33.333%;
    height: 120px;
    background: #EEE url('http://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/Approve_icon.svg/200px-Approve_icon.svg.png') no-repeat center center;
    background-size: 100px 100px;
  }
  
  div:nth-child(2) {
    border-left: 1px solid black;
    border-right: 1px solid black;
  }
  
  div:nth-child(3) {
   float: none;
   width: auto;
  }
  </code></pre>
  
  <p>Any ideas?</p>