CSS Hell simulating TABLE with DIV

Question

I´m trying to simulate a table using only CSS and DIV. The problem is that nothing that I do can perfectly simulate a table layout behavior.

Below is the table layout

Answer 1

Super annoying problem, just came up at work. I usually use an background to solve this problem but since everything needs to be responsive now it is annoying to make images for each Media Query. This is the only time I would use JavaScript to achieve what I want. Stupid that it is not supported.

HTML:

<ul class="table-layout clearfix">
    <li>
        <p>Header 1</p>
        <p>Header 1</p>
        <p>Header 1</p>
        <p>Header 1</p>
        <p>Header 1</p>
        <p>Header 1</p>
    </li>
    <li>
        <p>Header 1</p>
    </li>
    <li>
        <p>Header 1</p>
    </li>
</ul>

JavaScript:

$(document).ready(function(){

    var height = 0;

    $(".table-layout li").each(function(i){

        if($(this).height() > height)
            height = $(this).height();

    });

    $(".table-layout li").css("height", height + 'px');

});

CSS:

    /**
     * Markup free clearing.
     *
     * @see http://perishablepress.com/press/2009/12/06/new-clearfix-hack
     */
    .clearfix:after {
      content: ".";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
    }
    /* IE6 */
    * html .clearfix {
      height: 1%;
    }
    /* IE7 */
    *:first-child + html .clearfix {
      min-height: 1%;
    }

    ul, li{
        margin:0;
        padding:0;
        list-style-type:none;
    }

    ul{
        width:335px;
        overflow:hidden;
    }

    ul li{
        width: 31.5%;
        float:left;
        border:1px solid #000;
        margin-right:4px;
    }

http://jsfiddle.net/kXrn5/6/

Answer 2

This is a horrid answer, I can't believe I'm even suggesting it, BUT, if you are hell bent on making a table out of divs...

As is stated in the comments, if it is a table, use a table, tables are not evil, they were just overused at one time to do things they weren't designed for. They are designed to display tabular data so if you can, use them.

This is only suggested if you MUST make a table with divs

There is a little known display property in CSS to help you with this, read here: table-cell css.

Again, just use a table, if you can.