I would like all border divs to share the same height. If one gets larger, I’d like the others to do the same
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.
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?
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.
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?
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.
e.g.
<div>
<a></a>
<a></a>
</div>
I don’t think you can get chrome to work otherwise because the inner box never reaches the bottom.
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
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.
