Welcome to WebmasterWorld Guest from 100.24.209.47

Forum Moderators: not2easy

Message Too Old, No Replies

Help fitting these stupid floated objects where I want them

     
2:14 am on Jun 7, 2017 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1151
votes: 116


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?
2:26 am on June 7, 2017 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 5021
votes: 26


Have you considered flexbox?
2:47 am on June 7, 2017 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1151
votes: 116


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+.
3:04 am on June 7, 2017 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 5021
votes: 26


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).
5:31 am on June 7, 2017 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1151
votes: 116


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...
6:25 am on June 7, 2017 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4404
votes: 316


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. :(


7:16 am on June 7, 2017 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member keyplyr is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Sept 26, 2001
posts:12913
votes: 893


In the olden days I used tables...
This site (as well as 2 of mine) use tables.
7:43 am on June 7, 2017 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1151
votes: 116


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.
8:47 am on June 7, 2017 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member keyplyr is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Sept 26, 2001
posts:12913
votes: 893


Just by using HTTPS you loose everyone on Windows XP and before.
8:54 am on June 7, 2017 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1151
votes: 116


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?
9:14 am on June 7, 2017 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member keyplyr is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Sept 26, 2001
posts:12913
votes: 893


- 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