CODEWITHSUNDEEP
css
Torben
Torben

Reputation: 5494

All Li's in one list should have the same height as the highest item

i have a list with three items (li's). I want that the two remaining li's of that list have the same height as the highest item in that list. How can i do that with CSS?

Example: http://codepen.io/seraphzz/pen/EJFpd

Thanks!

Upvotes: 1

Views: 1642

Answers (2)

maximkou
maximkou

Reputation: 5332

Use:

display: table-cell;

Here fiddle with your corrected code http://jsfiddle.net/rwxdp/

Upvotes: 2

robertc
robertc

Reputation: 75707

Use display: table-cell to get table like layouts:

.box-page-ul {
  border-collapse: separate;
  margin-bottom: 20px;
}
.box-page-ul li {
  background-color: #60615c;
  padding: 20px;
  border: 10px solid white;
  width: 294px; 
  display: table-cell;
}

You have the limitations that you can't use margins to separate the li elements anymore, and also that they won't flow on to multiple lines like they would with float. If you need those then you'll have to resort to JavaScript, or wait until CSS Flexbox matures.

Upvotes: 4

Related Questions