Vertically center align divs with unknown height

Question

I'm trying to solve a vertical-align problem involving the floating divs. All the heights are unknown - because they are implicitly formed only with the inside text lines.

Here's the code: https://jsfiddle.net/zjzyryae/

#test {
  background: yellow;
  display: inline-block;
}
#block1 {
  float: left;
  display: inline-block;
  background-color: grey;
}
#block2 {
  background-color: green;
  float: left;
}

<div id="test">
  <div id="block1">
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
  </div>
  <div id="block2">
    sample
  </div>
</div>

I need to vertically center the "block2" div - with CSS only of course (no JavaScript).

See that "block1" div sets implicitly the parent "test" block height - which makes the principal difference with the similar described cases (where this height is explicitly set in pixels).

Perhaps this question is solved somewhere but I haven't found exactly the same case. The similar examples I considered were different.

This one Center vertically a unknown height text in a unknown height div actually includes the hard-coded height setting - which is dramatically different case than mine.

That one How to vertically middle-align floating elements of unknown heights? is also different case and not suitable for my situation - because the parent height is equal to the floating divs height (which is much easier than my case).

I tried to play with different display:table settings - but still no luck.

Answer 1

I suggest to use flexbox, perfectly with display: inline-flex so it has the "shrink to fit" feature just like other inline level elements. And align-items: center makes all the flex items to align to the middle.

#test {
  background: yellow;
  display: inline-flex;
  align-items: center;
}
#block1 {
  background-color: grey;
}
#block2 {
  background-color: green;
}

<div id="test">
  <div id="block1">
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
  </div>
  <div id="block2">
    sample
  </div>
</div>

If you do need to support older browsers, you can still use inline block (no float), the key is to set vertical-align: middle, and remove the unwanted white space if needed.

#test {
  font-size: 0; /*remove white space*/
  background: yellow;
  display: inline-block;
}
#block1,
#block2 {
  font-size: 16px; /*reset font size*/
  display: inline-block;
  vertical-align: middle;
}
#block1 {
  background-color: grey;
}
#block2 {
  background-color: green;
}

<div id="test">
  <div id="block1">
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
  </div>
  <div id="block2">
    sample
  </div>
</div>

Or use CSS table, again set vertical-align: middle, but it works differently from inline blocks, it vertically centers the content or elements inside rather the element itself or siblings. I added a <span> tag for the background color.

#test {
  background: yellow;
  display: inline-table;
  vertical-align: middle;
}
#block1,
#block2 {
  display: table-cell;
  vertical-align: middle;
}
#block1 {
  background-color: grey;
}
/* #block2 {
  background-color: green;
} */

<div id="test">
  <div id="block1">
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
  </div>
  <div id="block2">
    <span style="background:green;">sample</span>
  </div>
</div>

Answer 2

If you do not want to use flex, do not use float, but inline-block alone and vertical-align:

    #test {
      background: yellow;
      display: inline-block;
    }
    
    #block1 {
      display: inline-block;
      background-color: grey;
      vertical-align:middle;
    }
    
    #block2 {
      display: inline-block;
      background-color: green;
      vertical-align:middle;
    }

<div id="test">
  <div id="block1">
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
  </div><!--
  --><div id="block2">
    sample
  </div>
</div>

https://jsfiddle.net/zjzyryae/1/

Answer 3

You can use flexbox for it

#test {
        background: yellow;
        display: flex;
        align-items: center;
    }

Answer 4

why don't you using display flex for them all? it's a new trick and worth to try. using flex from the beginning and change the type of your css code.

this is all what i can give u.

    div#test {
        background: yellow;
        display: flex;
      flex-direction:row;
    }

div#block1, div#block2{
display:flex;
flex-direction:column;}
    div#block1 {
        background-color: grey;
    }

    div#block2 {
        background-color: yellow;
      align-items:center;
      justify-content:center
    }
    div#inside-block2{
        background-color:green;
    }

<div id="test">

    <div id="block1">
        <div>test</div>
        <div>test</div>
        <div>test</div>
        <div>test</div>
        <div>test</div>
        <div>test</div>
        <div>test</div>
        <div>test</div>
        <div>test</div>
        <div>test</div>  
    </div>

    <div id="block2">
      <div id="inside-block2">
        sample
      </div>
    </div>

</div>

so what i did is, made a wrap called test with a child block1 and block2, and a block2 id has a child which you can place or replace it wherever you want. you can learn more about flex in here

for some my code tips. use div#id for calling an id name in css, i believe in some browser could a little bit jumpy if you only calling them using this #id.

wish it will help you.