Help fitting these stupid floated objects where I want them

[csdude55]

I have a section that looks like this:

This . . . . . . . . . That | The Other

(I put in the . . . to show spacing for this example)

The | The Other text only shows on mobile; on desktop and table, That would be justified to the far right instead of | The Other.

Here's the coding that works:

<style>
.left { float: left }
.rt { float: right }
.clear { clear: both }
.mobile { display: none }

@media only screen and (max-width: 660px) {
 .mobile { display: block }
}
</style>

<div>
 <div onClick="showSub()">
  This

  <div class="rt">
   That

   <div class="rt mobile">
     | The Other
   </div>
   <div class="clear"></div>
  </div>
  <div class="clear"></div>
 </div>
 ...
</div>

BUT! Now I want to modify it so that clicking on This, That, or anything in between will trigger showSub(), but NOT if they click on |The Other.

This has gotten tricky, I've tried at least 10 different configurations and none of them are working quite right. The closest I've gotten is to add style="margin-right: 50px" to <div onClick="showSub()"> and move | The Other to float to the right of it, but then I'd have to make a separate class in the CSS file just for that, which I'd like to avoid; the CSS file is getting a lot bigger than I wanted, so I would consider that a last-resort.

Like so:

<style>
.left { float: left }
.rt { float: right }
.clear { clear: both }

.mobile { display: none }

@media only screen and (max-width: 660px) {
 .showsub { margin-right: 50px }
 .mobile { display: block }
}
</style>

<div>
 <div class="showsub" onClick="showSub()">
  This

  <div class="rt">
   That
  </div>
  <div class="clear"></div>
 </div>

 <div class="rt mobile">
   | The Other
 </div>
 <div class="clear"></div>
 ...
</div>

Any other suggestions on how to make this fit? Or is adding the margin the only good way to do it?

[Fotiman]

Have you considered flexbox?

[csdude55]

Not really... it's not compatible with older IE, is it? I still have traffic using all the way down to IE7, and AFAIK flexbox only supports IE11+.

[Fotiman]

Yikes! I'd probably quit my job if I had to support IE < 11. Such a miniscule percentage of market share (but of course, it's your own stats that matter).

[csdude55]

Believe me, man, it's a HUUUUGE pain! It's always been that way for me, though. My target demographic is local and somewhat rural, which means that I still have to account for people using Windows 95 on dial-up!

If I didn't own the place, I'd have quit a long time ago, too. I'm just grateful that I haven't pulled out ALL of my hair... yet...

[not2easy]

In the olden days I used tables, like everyone else in html4 (and older). To some extent they can be made responsive by using percentage widths to serve on mobile but it is a real challenge to try to do anything responsive when you are limited to what css those old browsers/platforms can parse. I would be spending a lot of time at caniuse. Windows 95 pretty much predates css. :(

[keyplyr]

In the olden days I used tables...

This site (as well as 2 of mine) use tables.

[csdude55]

The rebuild I'm working on now is my first sans-tables foray. I'm more or less giving up on the small percentage of users that predate CSS, which is scary, but at some point I'm holding back on features for the majority for the sake of the minority.

[keyplyr]

Just by using HTTPS you loose everyone on Windows XP and before.

[csdude55]

Wait, really? I didn't know that, and it might explain why I had a dip in traffic right after moving my sites to HTTPS. That didn't translate into a financial loss so I didn't think about it too much, though... so maybe those users were struggling with Adsense, too?

[keyplyr]

- The following browsers do not support SNI:
• Internet Explorer, all versions, Windows XP
• Safari, Windows XP
• BlackBerry Browser
• Windows Mobile 6.5 and lower
• Android 2.x default browser