title: Surrounding DIV background-color and inline-block
body: <p>If I set the background color for a div containing divs which have display:inline-block set, the background color is not used.</p>
  
  <p>JSFiddle links below.</p>
  
  <p>Consider this snippets:</p>
  
  <p>CSS:</p>
  
  <pre><code>.divisionOutputArea {
    background-color: yellow;
  }
  .divisionColumn[data-division=true][data-boxed=true] {
    border: 1px solid black;
    display: inline-block;
    float: left;
  }
  .divisionColumn[data-division=true] {
    display: inline-block;
    float: left;
  }
  .divisionColumn[data-result=true] {
    display: inline-block;
    float: left;
  }
  </code></pre>
  
  <p>And this HTML:</p>
  
  <pre><code>&lt;div class="divisionOutputArea"&gt;
      &lt;div class="divisionColumn" data-division="true" data-boxed="true"&gt;
          1&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
      &lt;/div&gt;
      &lt;div class="divisionColumn" data-division="true" data-boxed="true"&gt;
          2&lt;br /&gt;2&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
      &lt;/div&gt;
      &lt;div class="divisionColumn" data-division="true" data-boxed="true"&gt;
          3&lt;br /&gt;3&lt;br /&gt;3&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
      &lt;/div&gt;
      &lt;div class="divisionColumn" data-division="true" data-boxed="true"&gt;
          1&lt;br /&gt;&lt;br /&gt;1&lt;br /&gt;1&lt;br /&gt;&lt;br /&gt;
      &lt;/div&gt;
      &lt;div class="divisionColumn" data-division="true" data-boxed="true"&gt;
          2&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;2&lt;br /&gt;2&lt;br /&gt;
      &lt;/div&gt;
      &lt;div class="divisionColumn" data-result="true"&gt;
          :&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
      &lt;/div&gt;
      &lt;div class="divisionColumn" data-result="true"&gt;
          5&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
      &lt;/div&gt;
      &lt;div class="divisionColumn" data-result="true"&gt;
          =&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
      &lt;/div&gt;
      &lt;div class="divisionColumn" data-result="true"&gt;
          2&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
      &lt;/div&gt;
      &lt;div class="divisionColumn" data-result="true"&gt;
          4&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
      &lt;/div&gt;
      &lt;div class="divisionColumn" data-result="true"&gt;
          6&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
      &lt;/div&gt;
      &lt;div class="divisionColumn" data-result="true"&gt;
          2&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I would like to render the background of the used area of <code>&lt;div class="divisionOutputArea"&gt;[Contained divs as of example]&lt;/div&gt;</code> e.g. yellow.</p>
  
  <p>Tried it on FF11 and Webkit. Cross-browser is not of an issue.</p>
  
  <p>Not working:
  <a href="http://jsfiddle.net/8BVZB/" rel="nofollow">http://jsfiddle.net/8BVZB/</a></p>
  
  <p>Somewhat working, but not what I want:
  <a href="http://jsfiddle.net/d6bM6/" rel="nofollow">http://jsfiddle.net/d6bM6/</a></p>