title: Display:table-cell losing background color
body: <p>I have created the following code for a product box. I need the middle box to have a red background should no image be present (is for a CMS system), I have used <code>display: table-cell</code> so that I can vertically align the images but this seems to be causing an issue. It needs to be semi-responsive too hence the % based width. How I can get that middle image box to have a red background?</p>
  
  <p>Codepen: <a href="http://codepen.io/nickelse/pen/VvwRya?editors=110" rel="nofollow">http://codepen.io/nickelse/pen/VvwRya?editors=110</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="category-products cf"&gt;
    &lt;div class="cp-1"&gt;
      &lt;div class="image"&gt;
        &lt;img src="http://lorempixel.com/output/abstract-h-c-260-300-1.jpg" alt=""&gt;
      &lt;/div&gt;&lt;!-- .image --&gt;
  
      &lt;div class="title"&gt;
        This Is A Product Title
      &lt;/div&gt;&lt;!-- .title --&gt;
  
      &lt;div class="price"&gt;
        £10.99
      &lt;/div&gt;&lt;!-- .price --&gt;
    &lt;/div&gt;&lt;!-- .cp-1 --&gt;
  
    &lt;div class="cp-2"&gt;
      &lt;div class="image"&gt;
  
      &lt;/div&gt;&lt;!-- .image --&gt;
  
      &lt;div class="title"&gt;
        This Is A Product Title
      &lt;/div&gt;&lt;!-- .title --&gt;
  
      &lt;div class="price"&gt;
        £10.99
      &lt;/div&gt;&lt;!-- .price --&gt;
    &lt;/div&gt;&lt;!-- .cp-2 --&gt;
  
    &lt;div class="cp-3"&gt;
      &lt;div class="image"&gt;
        &lt;img src="http://lorempixel.com/output/abstract-h-c-260-300-1.jpg" alt=""&gt;
      &lt;/div&gt;&lt;!-- .image --&gt;
  
      &lt;div class="title"&gt;
        This Is A Product Title
      &lt;/div&gt;&lt;!-- .title --&gt;
  
      &lt;div class="price"&gt;
        £10.99
      &lt;/div&gt;&lt;!-- .price --&gt;
    &lt;/div&gt;&lt;!-- .cp-3 --&gt;  
  &lt;/div&gt;&lt;!-- .category-products --&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body {
    margin: 20px 0;  
    font-family: sans-serif;
  }
  
  .category-products {
    width: 1000px;
    margin: auto;
  }
  
  .cp-1{
    width: 32%;
    float: left;
    background: #999;
    text-align: center;
  }
  
  .cp-2{
    width: 32%;
    float: left;
    background: #666;
    text-align: center;
    margin-left: 2%;
  }
  
  .cp-3{
    width: 32%;
    float: left;
    background: #333;
    text-align: center;
    margin-left: 2%;
  }
  
  .image {
    height: 350px;
    width: inherit;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    border: 1px solid #b9b9b9;
    background: #fe0000;
  }
  
  .title {
    font-size: 20px;
    line-height: 20px;
    padding: 12px 0;
    font-weight: bold;
  }
  
  .price {
    font-size: 18px;
  }
  
  
  /**
   * For modern browsers
   * 1. The space content is one way to avoid an Opera bug when the
   *    contenteditable attribute is included anywhere else in the document.
   *    Otherwise it causes space to appear at the top and bottom of elements
   *    that are clearfixed.
   * 2. The use of `table` rather than `block` is only necessary if using
   *    `:before` to contain the top-margins of child elements.
   */
  .cf:before,
  .cf:after {
      content: " "; /* 1 */
      display: table; /* 2 */
  }
  
  .cf:after {
      clear: both;
  }
  
  /**
   * For IE 6/7 only
   * Include this rule to trigger hasLayout and contain floats.
   */
  .cf {
      *zoom: 1;
  }
  </code></pre>