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:

    

        
Header 1
        
Header 1
        
Header 1
        
Header 1
        
Header 1
        
Header 1
    
    

        
Header 1
    
    

        
Header 1
    

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/