how to display list as table?

Question

I have a list of items with different content floated left, I need to display them as a row.

<ul>
<li>small content..</li>
<li>medium Content..</li>
<li>large content..</li>
..
<!-- many item random contnet -->
</ul>

I would like to display the list items in a row.
row height depends on max height item in row, How to get it?

Demo

Answer 1

Add display:table-cell so it acts as table column. remove float:left as well.

#contentpane{}
#contentpane li{
    padding:10px;
    width:80px;
    border:1px solid #000;
    display:table-cell
}

DEMO

---

CASE 2

In case you need it with auto height then use the below white-space:nowrap; method

ul#contentpane{
    width:100%;  
    white-space:nowrap;

}
#contentpane li{
    padding:10px;
    width:80px;
    border:1px solid #000;
    height:auto;
    display:inline-block;
    white-space:normal !important;
}

DEMO 2 || DEMO (Vertically aligned to the top)

Answer 2

you should go with javascript to set clear:both to row overflow element.

 var ch=$("#container").width();

    var itemsPerRow=Math.floor(ch/102);

    var itemsCount=$("#contentpane li").length;
    var loopRound=Math.floor(itemsCount/itemsPerRow);

    for(var i=1;i<loopRound+1;i++)
    {
        var nextFirstItem=i*itemsPerRow+1;

        $("#contentpane li:nth-child("+ nextFirstItem  +")").css({"clear":"both"});
    }

demo

Answer 3

ul {
    display: table-row;
}

ul  > li {
    display: table-cell;
}

Note that you should have a wrapper with display: table in order to built a complete table representation.

Answer 4

Try this one

var maxHeight = 0;
 $("#contentpane li").each(function( index ) {
     var height = $(this).height();
     if(height  > maxHeight){
         maxHeight =height;
      }
 });

$("#contentpane li").css("height",maxHeight);

Fiddle Demo

Answer 5

Set height to the li.

#contentpane{

}
#contentpane li{
    float:left;
    padding:10px;
    width:80px;
    height:180px;
    overflow:auto;
    display:table-cell;
    border:1px solid #000;
}

FIDDLE

Answer 6

Drop the float and use inline-block instead:

http://jsfiddle.net/CmkSb/10/

#contentpane li{
    padding:10px;
    width:80px;
    display:inline-block;
    vertical-align: text-top;
    border:1px solid #000;
}