Vertical centering two floated DIV tags

[csdude55]

I know this is pretty remedial, but I just don't code enough to remember this one! And I've tried a dozen solutions I've found and none quite worked for me :-(

So here's my code:

<div id="container" style="padding: 10px">
 <div id="left" style="float: left">
  Blah
  Blah 2 (optional)
  Blah 3 (optional)
 </div>

 <div id="right" style="float: right">
  <div>
   <div>Blerg</div>
  </div>
 </div>
 <div style="clear: both"></div>
</div>

So I'm not sure what the height of left or right will be, but I know that right will definitely be 1 line. The height of container could be determined by the height of either of the child elements, so I want both of the child elements to be vertically centered.

Since I rely on the float tags I can't use position: relative. And vertical-align: middle with the child elements being set to display: inline had no impact. And since I don't know the heights, I can't just use a margin or padding to push everything down.

What's the next method to try?

(Oh, and I know that I could move the left element below the right element and eliminate the float: left completely, but I find that harder to read... and I want some of the data in left to be higher on the page in the hopes that Google will recognize it better)

[Fotiman]

I wouldn't use floats for layout anymore. I'd use Flexbox instead.

[csdude55]

I didn't think that Flexbox was compatible with older browsers? I still have a fair amount of people using old browsers, plus you never know what kind of nonsense a mobile browser will do. I just now feel "pretty" safe moving away from tables! LOL

[Fotiman]

How old? Older than IE10? If not, then look into Flexbox.

[csdude55]

Oh, DEFINITELY older than IE 10. I still have about 4% of my traffic from IE 7.0!

Think, older users running Windows 98 or XP that never update and never feel like they need to... Shoot, I'm still running Win 7, and the last update for IE on that is 9.0.

Only about 4% of my traffic is Firefox, which was surprising, but that goes back to v. 28.0. Then there's Samsung Internet (whatever that is), Amazon Silk, Android Webview, and Android Browser (in that order).

[Marshall]

from IE 7.0!

They will find soon they will no longer be able to access your site with TLS1.1 and TLS1.2. IE9 and below do not support it. That said, you should not concern yourself with them, IMHO.

[csdude55]

Wait, how soon?!

If I understand correctly, Win 7 doesn't support IE over 9.0. But 32.47% of my traffic uses Win 7... including me, and I have NO desire to "upgrade".

Saying that I shouldn't worry about my older users is tough, because they're the ones that still use desktop (which is worth a LOT more than mobile to me) and spend all day on my site. I might find that cutting out 4% of my users could mean cutting out 15%+ of my pageviews.

[Fotiman]

June 2018.
[lexiconn.com...]

[csdude55]

Back to the code... for those reading, I found this method that seems to work:

<div id="container" style="position: relative; padding: 10px">
 <div id="left" style="position: absolute; height: 50%; margin: auto; top: 0; bottom: 0; left: 0">
 Blah
 Blah 2 (optional)
 Blah 3 (optional)
 </div>

 <div id="right" style="position: absolute; height: 50%; margin: auto; top: 0; bottom: 0; right: 0">
 <div>
  <div>Blerg</div>
 </div>
 </div>
</div>