Need divs to share common height and want to vertically separate content

Hi there folks!

I need help formatting some divs I’m working with. You can see the divs I speak of by looking at the “Latest Brands” section of this page:

What I would like to do is two-part:

  1. I would like all border divs to share the same height. If one gets larger, I’d like the others to do the same
  2. I would like the image to vertically align towards the top of the div and the text link to vertically align toward the bottom of the div, with white space filling the necessary amount in the center.

Here’s a visual of what I’d like:

I have tried inserting two divs inside the container div to assign vertical alignment but I botched it up bad. Could someone help me figure out how to achieve this?

Thanks for your time!

This looks like a job for flex box.
I’m guessing there is going to be a whole bunch of these, not just the 2. Is that right?
I’ll see if I can knock up a Pen, but don’t hold your breath.

Hi there Sam and thanks for the help!

There will be pages with many. I’ll start reading up on flexboxes. I’ve not worked with that yet.



I have an old codepen here that shows roughly the layout you want.

That should get you on the right track.

1 Like

Too quick! :grimacing:
I’m nearly there though.

OK, here it is:-

1 Like

Sorry Sam :slight_smile:

Good work :smile:

Just a quick note that you are running into the same bug with min-width on the flex item as does my demo (and everyone else on the web).

IOS doesn’t obey the min-width so you end up with three columns on mobile which is the opposite of what you want.

Therefore you need to use media queries for ios to make it one column at the required point etc.

It’s a nasty bug.


Thanks. I don’t have access to any ios device, so can’t test and don’t know about that.

Damn you iOS! I love the way flex does away with media queries (almost).

No, not many people know about the bug. I think I was one of the first to point it out.

It’s a real shame as it works great without media queries everywhere else. Hopefully its a bug which gets fixed.

If the element is a fixed width you can get it to work using flex: 1 0 200px but then you lose the fluidity.

Hi there Sam, and thanks so much for the help!

I’ve implemented the css and ul~>li structure, but I’ve mucked something up. If you look at the page now, the pro-comp box text is hugging the bottom of the image instead of pushing down to the bottom. Perhaps I have some other css that’s prohibiting it’s proper placement?

I’m not seeing that. The logo is at the top and text at the bottom.
justify-content: space-between; makes that happen.

Try looking in Chrome :slight_smile:

That’s why in my example I don’t use the double wrapper. If you want the whole block to be a link then it would be better to use divs rather than the list structure.



I don’t think you can get chrome to work otherwise because the inner box never reaches the bottom.

Hi there Paul and thanks for the confirmation.

I split the link into two so the image is wrapped in one and the text in another. Is there something I can do in this format that would allow me to get the text to behave correctly in chrome or do I need to scrap the current format and start fresh with your demo code?

I couldn’t find anything that worked in Chrome using the structure you were using. The inner inner flex box never stretches to the height of the parent. There may be a setting I missed as flex box can be confusing.

It will work if you change your ul to say a nav element and then use anchors instead of the list element and then you won’t need the extra nested flexbox and will look like the structure in my codepen.

I’ve been trying, but could not get it to work in Chrome.

I was still using the nested flex, maybe that was my issue. The height: 100% goes huge in chrome, removing it makes the div shorter than the anchor. Admittedly, the height:100% did always feel like a hack that shouldn’t work, but it does in FF.

BTW, regarding the iOS min-width bug. I have removed the min-width so the width is defined by the flex-basis which I set in em units. This makes it cope quite elegantly with text zoom while removing the need for a query or min-width.
Though it may require some testing elswhere :grimacing:

Ok solved :slight_smile:

<meta charset="utf-8">
<title>Untitled Document</title>
html {
	box-sizing: border-box;
*, *:before, *:after {
	box-sizing: inherit;
.wrap {
	margin:0 auto;
	border:1px solid #000;
p {
	margin:0 0 1em
.image {
	margin:10px 0;
	border:1px solid #000;
.wrap li {
	vertical-align:top;/* fallback*/
 	display:inline-block;/* fallback*/
	margin:10px 1%;
	min-width:200px;/* doesn't work in ios so use media queries to go to one column */
	flex:1 0 29%;
.wrap a {
	border:1px solid #000;
	flex:1 0 auto;/* important for chrome */
.footer {
	margin-top:auto;/* this is important to move footer down*/
.footer a {color:#fff}
.img1 {height:100px}
.img2 {height:130px}
.img3 {height:160px}
.img4 {height:120px}
.img5 {	height:50px}
.img6 {height:200px}
.img7 {height:100px}

<ul class="wrap">
  <li><a class="inner" href="#">
    <div class="image img1">Product image here</div>
    <div class="footer"> footer</div>
    </a> </li>
  <li><a class="inner" href="#">
    <div class="image img2">Product image here</div>
    <div class="footer"> footer</div>
    </a> </li>
  <li><a class="inner" href="#">
    <div class="image img3">Product image here</div>
    <div class="footer"> footer</div>
    </a> </li>
  <li><a class="inner" href="#">
    <div class="image img4">Product image here</div>
    <div class="footer"> footer</div>
    </a> </li>
  <li><a class="inner" href="#">
    <div class="image img5">Product image here</div>
    <div class="footer"> footer</div>
    </a> </li>
  <li><a class="inner" href="#">
    <div class="image img6">Product image here</div>
    <div class="footer"> footer</div>
    </a> </li>
  <li><a class="inner" href="#">
    <div class="image img7">Product image here</div>
    <div class="footer"> footer</div>
    </a> </li>

Hey guys, I am bit cautious about the use of flex related properties as they are relatively newer I and are not supported for IE9. If one cares to support IE9 that is.

Wouldn’t it be better to use display:table; or something to that extent?

Display table has its place, I do use it, mainly if it’s a single row of items, like a menu bar or columns. But if you have a large number if items on multi rows, you would have a hard time making it responsive, changing the number of items per row.

I’m not too concerned, if you make the flex children display: inline-block (in a case like these boxes) the sky won’t fall in if flex is not supported. The inline blocks will be responsive and quite usable, just not quite as slick as with flex. In the end, what do expect in an antiquated browser?

Microsoft doesn’t even provide security patches so no one should be using that browser any more anyway. The only supported version of IE now is 11. The rest are now security holes instead of browsers.