Vertical Aligning Using a Grid System

HTML & CSS
1

I’m guessing that vertical aligning probably crops up a lot on this here forum. It’s definitely something that has caused me a lot of grief over the years! Anyway, basically what I’ve done is created a grid system of boxes using display:table, display:table-row and display: table-cell to create this grid. However, now I want to vertical align each box but am having some serious problems!

You can see what I’ve done so far here: http://www.thgcreative.co.uk/comono/whats-on/

Now, there are two things that I would ideally like to do and was wondering whether they would be possible. First off I want the black box at the bottom of each box to be aligned at the bottom of each box. I’ve actually tried doing this using position:absolute but for some reason couldn’t get the clear div underneath it so that the box looked correct.

However, this wouldn’t really solve my problem as if this black box was at the bottom there would then be a big gap between the text and black box on some of the boxes. So, what I would really like is for the text in the middle to have a flexible height or flexible margins so that they would expand depending on the size of the box. Does that make sense? Would something like that be possible?

Essentially I just want this page to look good so am open to suggestions from anyone.

Thanks!
Russ

2

This is not a very good solution, but in lieu of something better, you could try something like

.what-top {min-height: 180px;}

You could make the black box sit at the bottom in each div with

.what-main {
  vertical-align: bottom;
}

but that on its own would make the boxes uneven at the top, so not much good.

3

Cheers for the suggestion Ralph. That is something I tried and which doesn’t quite work, as well as yeah, making the tops uneven instead of the bottom. Does anyone else have a suggestion?