CODEWITHSUNDEEP
csscss-float
user
user

Reputation: 751

Floating <li> with different heights

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:

enter image description here

and this is what I get if some images don't have any description or description length is different.:enter image description here

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.

Upvotes: 2

Views: 3147

Answers (4)

Marc Audet
Marc Audet

Reputation: 46785

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.

Upvotes: 0

Vel
Vel

Reputation: 731

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/

Upvotes: 1

Paulie_D
Paulie_D

Reputation: 115046

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;
}

Upvotes: 0

Sowmya
Sowmya

Reputation: 26969

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

Upvotes: 0

Related Questions