I have a listing made with a unsorted list in three columns. Every <li> is holding an image, a <h2>, a <p> and a form holding a button. What I would like to accomplish is that the <h2’s> are neatly lined up under the images and the same for the buttons at the bottom of each <li>. But because not all images have the same height neither the <h2> nor the images are lined as you can see here. Is there a way that I have all <h2’s> and the buttons in the different colums lined up?
It can be done easily by using a table row philosophy but then you have to dis-associate the text from the images and contain each in a new row which isn’t semantically very good.
There are some things you can do if you want to keep things logical but you may have to make compromises in some way.
You could for example align the text neatly but that would mean the top of the images would be uneven as you would simply vertically-align them to the bottom (using inline-block instead of floats). This just changes the uneven aspect to the top of the images rather than the text.
You also have to consider whether the text under the image is going to run to two lines and that would again mess up the alignment unless they were all in separate cells and rows as mentioned firstly.
So what else can you do?
1)You could set min-heights for the elements so that that they line up and then control your data to be within those limits.
Assuming your text under the image is only one line you could create some padding-top above the image and absolutely place the image into the padding and that would mean the text would line up but you would need to keep the images within those constraints (or hide the overflow).
Use display:table and table-cell but you would need to do it in separate rows so all images go n the first row and then text on the second row and buttons in the third row. Something like this example but you need an extra row and align the images vertical-align:top;
The flexible box model allows for things like this but support is minimal at the moment so I would wait unless you have a fall-back for other browsers.
The easiest solution would be as shown in Number 2 above but of course does not allow for full flexibility.
Years ago I did a few examples that might be of interest but they possibly need updating.
Hi Paul. I will go for the second option. Although in the example are all portrait images, most of the images from other categories are landscape so the second option gives me enough flexibility. Thanks a lot :tup: