title: How to have display table and floating divs with same height
body: <p>I'm using display:table-celle and display:table to give the same height to my divs and it works perfectly. I just have a problem with the height of my divs when I want to add float to them.</p>
  
  <p>Here is what I want :
  <a href="http://i.stack.imgur.com/odSwR.jpg" rel="nofollow">example</a></p>
  
  <p>here is my jsfiddle: <a href="https://jsfiddle.net/kodjoe/Lsszt0aa/4/" rel="nofollow">https://jsfiddle.net/kodjoe/Lsszt0aa/4/</a></p>
  
  <p><strong>here is my html code:</strong></p>
  
  <pre><code>&lt;div class="allcol"&gt;
  &lt;div class="col1"&gt;item #1&lt;br/&gt;item #1&lt;br/&gt;1item #1&lt;/div&gt;
  &lt;div class="col2"&gt;item #2&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="allcol"&gt;
  &lt;div class="col1b"&gt;item #4&lt;br/&gt;item #4&lt;/div&gt;
  &lt;div class="col2"&gt;item #3&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="allcol"&gt;
  &lt;div class="col1"&gt;item #5&lt;br/&gt;item #5&lt;/div&gt;
  &lt;div class="col2"&gt;item #6&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="allcol"&gt;
  &lt;div class="col1b"&gt;item #8&lt;/div&gt;
  &lt;div class="col2"&gt;item #7&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>here is my css code:</strong></p>
  
  <pre><code>.allcol {  width: 100%; display:table; }
  
  .col1, .col2, .col1b { width: 50%; display: table-cell;  }
  
  .col1, .col1b { background-repeat: no-repeat; background-position: center center; background:tomato; }
  
  .col2 { padding:80px 0px; vertical-align: middle; background:#fafafa;} 
  
  .col1, .col2 {float:left;}
  
  .col1b { float: right; }
  
  h2.textcol2 {padding:8em 8em 0em 8em; text-align:center; color:#e07532; }
  
  p.textcol2  {padding:0em 8em 8em 8em; text-align:center; }
  
  .marginimg { margin:30px; }
  
  @media screen and (max-width:1169px) { 
  .col1, .col2, .col1b { width: 100%; text-align: center; }  
  .col2 { padding:80px 0px; } 
  .marginimg { margin:0px; }
  }
  
  @media screen and (max-width: 768px ) {
  .inline-items li:last-child { padding-right: 0; }
  .containerpage { margin-top:200px;}
  .col2 { padding:80px 0px; } 
  }
  </code></pre>