List items with different heights

I am working on a website for a producer/distributer of Greek products. On the products page they want a selection of products presented like this:

So I decided to make an unsorted list, which is actually working. The only problem I have is that the amount of text, as you can see in the example, for every product is very different so I am having problems to align the different items. What would be the best sollution to make it line up as in the example?

Thank you in advance

As you can see at the date did I ask this question quite some time ago. The project was posponed for some time so I didn’'t think about it anymore until yesterday, when I got the request to continue with the website. I am still struggling to make thos list items align neatly as in the example. For now I have the following CSS:


#products {
  width: 100%;
  margin: 2rem 0 0;
  overflow: hidden;
}

#products li {
  width: 50%;
  float: left;
  margin-bottom: 2rem !important;
  position: relative;
  min-height: 350px;	
}

#products li h2 {
  font-size: 1.875rem;
  padding-bottom: 0;
}

#products li p {
  margin: 0 1.5rem 1rem 0 !important;
  font-size: .8rem !important;
}

#products li img {
  display: block;
  position: absolute;
  left: 0;
  top: 200px;
}

As you can see did I use a min-height for the lis and did I position the image absolute. But I am not happy with that sollution since there will be more products with different amount of text. Besides of that the absolute positioned img is not working either as you can see here.

What would be the best solution to have the different items aligned like in the jpg in my first post?

Thank you all in advance

donboe, your design goals are usually more complex that this. What exactly needs to be aligned? Looks like the titles are horizontally aligned and the images are horizontally aligned and there may be space between the description and the image. Will there ALWAYS be two columns or do you expect the page to be responsive and change to one column, in which case wouldn’t the horizontal alignment become irrelevant?

Designs like this are really only achievable using flexbox which limits then to the most modern browsers only.

There are ways to do it with other methods but involve separating the data a little. One way to achieve the effect is to think of each row as a table row and so along the top row you would have the text for the two items in adjacent cells. Then you close the row and start another one and in the next two adjacent cells you put the images. That means that the text and images will always be aligned correctly no matter how much content.

You can use display:table/ row / cell properties for this so you don’t need a real table but the drawback is the separation of data as they are no longer self contained units. This may or may not matter to you so could be the solution.

There is however one big drawback of this method is you want the data to align in one column for small screens and then the problem of separate data bites you because you can no longer have text followed by an image underneath because you would just get two lots of text followed by two lots of images. In order to satisfy smaller screens you would then perhaps need to duplicate content in hidden divs and show and reveal as necessary using media queries and things are getting really complicated now :).

Maybe the easier solution is just to give a min-height to the text so that it satisfies most cases. No need to absolutely position the image. I would use nline-block instead of floats so that you don’t have snagging issues on each row.

Your right. I have faced more complex things. But to be honnest, this is not the first time I am struggling with a similar problem. Some years ago I was facing the exact same problem!

Your right here as well. The titles are aligned, which is not strange because they are are on top. The descriptions are aligned as well since they are just under the titles. And indeed the images are aligned as well but that is because I have positioned them absolute …px from the top. But as you can see do I use Lorem ipsum text as a test so it can easily be that the actual text will be way longer so I am not realy happy with the absolute positioned images

Yes for now there will be always two columns.

Although I wouldnt have a problem with this, probably the client would :frowning:

To be honnes I remember me facing a similar problem which you answerd Paul. So I have been looking true all of my post untill I found that post. And indeed that was at that time one of the sollutions. So I have been testing that as well this morning, but I couldnt get it to work since the data is coming from the database so I am looping over the lis instead of over the uls

Inline-blocks on the li s you mean? Because I just tried that but now I just have 4 blocks under eachother as you can see here

Edit: I changed the li s width to 49% and gave the text blocks a min-height of 12em and it is working now. Thanks Ronpat and Paul!