CODEWITHSUNDEEP
htmlcss
emphaticsunshine
emphaticsunshine

Reputation: 3765

List items with same height

I have created a fiddle: http://jsfiddle.net/pQZ8f/

I want to have both the list items to be of same height without setting height manually. I want it to auto grow. I don't want to use javascript. Can it done be through css?

Upvotes: 13

Views: 55674

Answers (8)

Santosh Kadam
Santosh Kadam

Reputation: 1352

ul 
{
  display: table;
}

li
{
  display:table-cell;   
}

Upvotes: 1

Furqan Freed
Furqan Freed

Reputation: 376

List is set as table and it will contain table properties. for list item when you set table-cell they will get table cell properties and by default all table cells will get same height.

<!--SCSS-->
.list {
     display: table;

    .list-item {
       display: table-cell;
    }
}



<!--html-->
<ul class="list">
    <li class="list-iteam">
        <h1>Heading</h1>
        <p>Details in text</p>
    </li>
    <li class="list-iteam">
        <h1>Heading 2</h1>
    </li>
    <li class="list-iteam">
        <h1>Heading 2</h1>
        <p>this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text </p>
    </li> 
</ul>

Upvotes: 0

Palash Karia
Palash Karia

Reputation: 700

It's 2018, and we have display: flex, with 97.66% browser support (https://caniuse.com/#feat=flexbox)

With flexbox, all you need to do is: 

ul {
  display: flex;
}

li{
 width:100px;
 border: 1px solid black;   
}

Here's the fiddle: http://jsfiddle.net/pQZ8f/1076/

Upvotes: 9

Julia Trikoz
Julia Trikoz

Reputation: 281

I use jquery.matchHeight.js library for this purpose. Adding class ="frame-height" to all li elements, make all li elements the same height as the highest li element.

Upvotes: 0

Max
Max

Reputation: 211

You can use: display: inline-table on your LI elements

li {
    width:100px;
    background: red;
    display: inline-table
}

here is JSFiddle

Upvotes: 3

Matthew
Matthew

Reputation: 25743

Ahh, yee old same height column problem.

One solution is to fart around with bottom margin / padding.

Works in IE7+ (might even work using ie6, I don't have it installed)

ul {
    overflow: hidden;
    border: 1px solid black;
    float: left;
}
li {
    float:left;
    width:100px;
    background: red;
    padding-bottom: 10000px;
    margin-bottom: -10000px;
}
li + li {
    border-left: 1px solid black;
}

JSfiddle Demo

Upvotes: 10

XML
XML

Reputation: 19498

It depends on why you want them the same height: what overall effect are you trying to achieve?

One option: If you're simply trying to match a background or something, you can put the background on the <ul> instead of the <li>'s and the <ul> will expand automatically to whatever the max height is of its child elements.

Further, if you're trying to make them the same height so you can align the bottom of the text, you can combine display: inline-block instead of float, and horizontal-align: bottom;. The result in this Fiddle gets you something that at least looks like the <li>'s are the same height, but won't work for borders.

Upvotes: 0

Fr&#233;d&#233;ric Hamidi
Fr&#233;d&#233;ric Hamidi

Reputation: 262919

It seems you're looking for a tabular layout, so maybe the best bet would be to use a <table> instead of floating <li> elements.

That said, you can also specify tabular styles on your elements:

ul {
    display: table-row;
}

li {
    width: 100px;
    border: 1px solid black;
    display: table-cell;
}

This should work on most modern browsers. You will find an updated fiddle here.

Upvotes: 24

Related Questions