Floating <li> with different heights - css

Question

Is there any way how to make all list items of the same height? I searched this website and found this solution but it doesn't work for me if I add float:left. I need float:left for line breaks after each 4 images.
ul.Gallery{display:table-row;}
ul.Gallery li{float:left;list-style:none;margin:0 5px 5px 0;
display:table-cell;background:red;}
<ul class="Gallery">
<li><img src="image1.jpg"><p>description1</p></li>
<li><img src="image2.jpg"><p>description2</p></li>
<li><img src="image3.jpg"><p>description3</p></li>
<li><img src="image4.jpg"><p>description4 description4 description4 description4 description4 description4</p></li>
<li><img src="image5.jpg"><p>description5</p></li>
</ul>
This is what I need:
and this is what I get if some images don't have any description or description length is different.:
I can not set width or min-heigth for <li> elements because not all the images have description and description length may be very different.
I don't want to use javascript for this purpose.

Answer 1

Try this (edited code a bit):
ul.Gallery{display:block; padding:0; margin:0;}
ul.Gallery li{
padding:0;
background:red;
display:inline-block;
vertical-align: top;
width:23%;
margin:0 1% 5px 0;}
img {max-width: 100%; height: auto;}
http://jsfiddle.net/uR9YV/

Answer 2

Remove float:left and add height:100%
ul.Gallery li{
list-style:none;
margin:0 5px 5px 0;
background:red;
display:table-cell;
vertical-align: top;
height: 100%;
}
DEMO

Answer 3

Change float:left for display:table-cell an the li/cells will all have the same height.
Note however, that you may have to restrict the width of the li as the text will cause different widths depending on it's length.
JSfiddle Demo
CSS
ul, li {
list-style: none;
}
ul {
display: table;
}
li {
display:table-cell;
border:1px solid grey;
padding:5px;
width:20%;
}
li img {
display: block;
margin:0 auto;
}
li p {
text-align: center;
}

Answer 4

Here is one of realizing this layout using rather different mark-up.
The feature of this layout is that the li elements all have the same height which
means that the red backgorund has the same height with a row.
If it were not for the red background color, this problem would be a lot easier to
solve.
The HTML would look like this:
<div class="GalleryWrap">
<ul class="Gallery">
<li>
<img src="http://placekitten.com/150/100" />
<p>The cat in the hat.</p>
</li>
<li>
<img src="http://placekitten.com/150/100" />
<p>The cat in the hat.</p>
</li>
<li>
<img src="http://placekitten.com/150/100" />
<p>The cat in the hat is wearing a fur coat.</p>
</li>
<li>
<img src="http://placekitten.com/150/100" />
<p>The cat in the hat.</p>
</li>
</ul>
<ul class="Gallery">
<li>
<img src="http://placekitten.com/300/200" />
<p>The cat in the hat.</p>
</li>
<li>
<img src="http://placekitten.com/150/100" />
<p>The cat in the hat.</p>
</li>
<li>
<img src="http://placekitten.com/150/100" />
<p>The cat in the hat is wearing a fur coat.</p>
</li>
<li>
<img src="http://placekitten.com/150/100" />
<p>The cat in the hat.</p>
</li>
</ul>
</div>
and the CSS:
.GalleryWrap {
display: table;
width: auto;
margin: 0 auto;
border-collapse: collapse;
}
ul.Gallery {
display: table-row;
}
ul.Gallery li {
display: table-cell;
vertical-align: top;
width: 25%;
background-color: red;
border: 5px solid white;
}
ul.Gallery li img {
width: 100%;
}
ul.Gallery li p {
margin: 5px;
}
Create a the CSS table .GalleryWrap, and use display: table-row for ul.Gallery.
Within each ul.Gallery, put in the four images, and repeat for each group of four.
I added a white border to control the spacing between cells, but you can also use
cell spacing and cell padding.
In practice, the mark-up could be generated automatically using a scripting language
like PHP or the features of the template system used to build the pages of the website.
Demo: http://jsfiddle.net/audetwebdesign/DBZdf/
Note: This layout may be easier to build using flex, but flex is still rather new and supported only by the latest browsers.