Make inner divs same height as parent div (with auto height)

[Thibault]

Hi,

I have a parent div with height: auto. In this div, there are two other divs. One with an icon, one with some text in it. These divs both have height: auto as well so the text mainly decides how large the parent div becomes.
I would now like to vertically center the icon next to the text, but the problem is that the div containing the icon isn’t as high as the parent div.

I made a Codepen for this issue:

I’ve tried with display: table and positioning absolute, but neither of these methods really worked.
Could someone please look into this and give me their insights?

Many thanks in advance!

[SamA74]

@Thibault

I’ve tried with display: table

That’s the simplest way to do it, but your other css (not included in the pen) is interfering with that, namely the wrapper being floated.

[SamA74]

@SamA74

namely the wrapper being floated.

Not just the wrapper, but all "col"s are floated. I’m guessing those are bootstrap classes or the like. So you would need to override all the bootstrappery, or I imagine there will be a bootstrap way of doing this, for which I’m not the person to ask.

[dresden_phoenix]

height:auto; means let the height be determined but the element’s content NOT the parent’s height ( this behavior just doesn’t exist unless you set a specific height on the parent ( and I MEAN height , not min-height). However if you do have given explicit height to the parent element, then you could just use height:100% on the child.

If you haven’t given explicit height, you could try this is using flex-box.
hope that helps

[Thibault]

@SamA74

Not just the wrapper, but all "col"s are floated. I’m guessing those are bootstrap classes or the like. So you would need to override all the bootstrappery, or I imagine there will be a bootstrap way of doing this, for which I’m not the person to ask.

Those are indeed Bootstrap columns. Messing with the float properties would be a solution yes, but I’ve chosen not to because that would likely give me problems later on. Many thanks though!

@dresden_phoenix

height:auto; means let the height be determined but the element’s content NOT the parent’s height ( this behavior just doesn’t exist unless you set a specific height on the parent ( and I MEAN height , not min-height). However if you do have given explicit height to the parent element, then you could just use height:100% on the child.

If you haven’t given explicit height, you could try this is using flex-box. hope that helps

Flexbox was indeed the way to go! With some tutorials I came up with this solution:

Many thanks! Also thanks to:
http://getbootstrap.com.vn/examples/equal-height-columns/
https://davidwalsh.name/css-vertical-center-flexbox

[SamA74]

@Thibault

Messing with the float properties would be a solution yes, but I’ve chosen not to because that would likely give me problems later on. Many thanks though!

True, the way you would do it in practice is not to put the settings on the BS “col” classes, but do as you have with the flex solution and create new classes with the desired properties to override the floats and assign them only to the elements that need to un-float.
Flex works because it’s quite incompatible with floats and will remove any floating behaviour from its elements.

I see the link shows a BS class for this .row-eq-height for this purpose, I thought BS must have one. So if you are sticking with BS, just use that class and be done with it.