Make display table-cell use percentage width

Question

Fiddle

I've got this table feel going, using an unordered list. But I can't figure out how to get the table-cells to have 50% width (I want each row to be 100% width). The reason I am using display: table-row; and display: table-cell; is so that I can vertical-align the data if the parameter text is more than one line. I don't want to use an actual pixel or em value for the width, because, well, I just want it in percentage if its possible. I would rather give up the vertical-align. Please no javascript. Thanks!

HTML:

<div class="group group2">     <h2>Health Indicies</h2>     <ul>         <li><p class="parameter">GGP</p><p class="data">265</p></li>         <li><p class="parameter">Comfort</p><p class="data">blah</p></li>         <li><p class="parameter">Energy</p><p class="data">gooo</p></li>     </ul> </div> 

CSS:

ul {     margin: 0;     padding: 0;     list-style: none; } .group {     width: 50%;     margin-bottom: 20px;     outline: 1px solid black;     background: white;     box-shadow: 1px 1px 5px 0px gray;     -webkit-box-sizing: border-box;     -moz-box-sizing: border-box;     box-sizing: border-box; } .group h2 {     display: block;     font-size: 14px;     background: gray;     text-align: center;     padding: 5px; } .group li {     clear: both; } .group p {     padding: 3%;     text-align: center;     font-size: 14px; } .group2 li {     display: table-row; } .group2 p {     display: table-cell;     vertical-align: middle;     width: 46%;     border-bottom: 2px solid gray; } .group li:last-child p {     border-bottom: 0; } 

Answer 1

You're almost there. You just need to add display: table and width: 100% to your ul.group2. You could probably also get away with not supplying a width on your .group2 p elements.

This should work: http://jsfiddle.net/6Kn88/2/

ul {      margin: 0;      padding: 0;      list-style: none;  }  .group {      width: 50%;      margin-bottom: 20px;      outline: 1px solid black;      background: white;      box-shadow: 1px 1px 5px 0px gray;      -webkit-box-sizing: border-box;      -moz-box-sizing: border-box;      box-sizing: border-box;  }  .group h2 {      display: block;      font-size: 14px;      background: gray;      text-align: center;      padding: 5px;  }  .group li {      clear: both;  }  .group p {      padding: 3%;      text-align: center;      font-size: 14px;  }  .group2 ul {      display: table;      width: 100%;  }  .group2 li {      display: table-row;  }  .group2 p {      display: table-cell;      vertical-align: middle;      width: 46%;      border-bottom: 2px solid gray;  }  .group li:last-child p {      border-bottom: 0;  }

<div class="group group2">      <h2>Health Indicies</h2>      <ul>          <li><p class="parameter">GGP</p><p class="data">265</p></li>          <li><p class="parameter">Comfort</p><p class="data">blah</p></li>          <li><p class="parameter">Energy</p><p class="data">gooo</p></li>      </ul>      <span class="clear"></span>  </div>