title: Content of list-elements full height CSS only
body: <p>I'm still struggling with my lists...</p>
  
  <p>With some help I managed to get a horizontal list with (for my case) perfect dimension: 33.33% width and the same height based on the highest element.
  I combined regular list-items with <code>table</code> and <code>table-cell</code> properties.</p>
  
  <p>However, now I just need to wrap the content of every <code>&lt;li&gt;</code>-element in an <code>&lt;a&gt;</code>-tag to make the whole <code>&lt;li&gt;</code> a link. This is harder than I thought, since the links won't fill the whole <code>&lt;li&gt;</code>-element according to the highest one.</p>
  
  <p>The best is, if you take a look at the Fiddle: <a href="http://jsfiddle.net/paelzersebbi/mJm6p/4/" rel="nofollow">http://jsfiddle.net/paelzersebbi/mJm6p/4/</a></p>
  
  <p>The red part need to be extended to the bottom of each <code>&lt;li&gt;</code>-element. I cannot use fixed height or width since it needs to be responsive. I also need the <code>&lt;div class="one"&gt;</code>-container since it is supposed to have a background-image.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;&lt;a href=""&gt;
          &lt;div class="one"&gt;
              &lt;div class="caption"&gt;&lt;h4&gt;Caption 1&lt;/h4&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="two"&gt;
              Here is some text.
          &lt;/div&gt;
          &lt;/a&gt;
  
      &lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;
          &lt;div class="one"&gt;
              &lt;div class="caption"&gt;&lt;h4&gt;Caption 2&lt;/h4&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="two"&gt;
              Here is some text.&lt;br /&gt;
              But there is more.
          &lt;/div&gt;
          &lt;/a&gt;
  
      &lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;
          &lt;div class="one"&gt;
              &lt;div class="caption"&gt;&lt;h4&gt;Caption 3&lt;/h4&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="two"&gt;
              Here is some text.&lt;br /&gt;
              But there is more.&lt;br /&gt;
              And even more.
          &lt;/div&gt;
          &lt;/a&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>ul {
      list-style: none;
      display: table;
      border-collapse: separate;
      border-spacing: 30px 0;
      width: calc(80% + 60px);
      margin: 0 -30px;
      padding: 0;
  }
  li {
      display: table-cell;
      width: 33.33333%;
      background-color: #FFF;
      vertical-align: top;
      padding: 10px;
      position: relative;
  }
  a {
      display: block;
      background: red;
  }
  a:hover {
      background: #CCC;
  }
  .one {
      height: 100px;
      background-color: #C92;
      position: relative;
  }
  .caption {
      position: absolute;
      bottom: 0;
  }
  h4 {
      margin:0;
      padding:5px;
  }
  .two {
      padding:5px;
  }
  </code></pre>
  
  <p>Thanks for the help, I really appreciate it!</p>