Currently grappling with a dilemma related to the vertical-align attribute and floating div elements. The heights of these divs are unknown as they are dynamically created based on text content.
If you want to take a look at the code snippet, here is the link: 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>My goal is to vertically center the "block2" div using CSS alone (no JavaScript allowed).
The crucial factor here is that the height of the parent "test" block is dictated by the presence of "block1," rather than being explicitly defined in pixels.
I've scoured various resources but haven't found an exact solution to my unique scenario. The examples I've come across so far have not been applicable to this specific case.
For example, this question about vertically centering text in a dynamic height div relies on setting fixed heights - unlike my scenario.
Similarly, this guide on aligning floating elements vertically does not match my situation as it assumes the parent height matches the child div heights.
I've explored various options like tweaking the display: table property, but so far, no luck.