title: Display: table overflow parent div in firefox
body: <p><strong>Problem and question</strong></p>
  
  <p>When using display: table and display: table-cell to vertical align a element, Firefox overflow the parent container width. See live demo to inspect code.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="hew storeloader" href="/stores/arti-zen-eskilstuna-city"&gt;
      &lt;div class="holder hp100" style="height: 325px;"&gt;
          &lt;div class="storecontent"&gt;
              &lt;img alt="" src="/img/logo-white.svg"&gt;
              &lt;p&gt;Arti.Zen Eskilstuna City&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>section.stores .storeloader {
      width: 47.82609%;
      float: left;
      margin-right: 4.34783%;
      display: inline;
      overflow: hidden;
      background: #000;
      color: #FFF;
      text-align: center;
      margin: 10px 0;
      position: relative;
      cursor: pointer;
  
  section.stores .storeloader .holder {
      width: 100%;
      display: table;
  }
  section.stores .storeloader .holder .storecontent {
      display: table-cell;
      padding: 0 10px;
      text-align: center;
      vertical-align: middle;
      text-transform: capitalize;
      font-size: 20px;
  }
  </code></pre>