Thanks @Ray.H. Unfortunately I need this to at least work for IE11. I should have said this in the original post!
Thanks @SamA74. I’m going to save this and might end up using it. I was hoping to see a flexbox-only solution, which avoids the use of floats. I thought scenarios like this is something flexbox and grid were designed to overcome? Maybe not.
Why? Floats are not deprecated, it’s just they are no longer the only or best method to do everything in layout.
The right code is that which works.
Though my only issue with this one is in the case that putting the image before the heading interferes with the semantic structure.
I could be done, in a fashion with flex alone, by using a column layout which wraps to a second column.
The problem with wrapping columns in flex is that it requires a fixed height for the flex conatiner, which is rarely a good idea.
Honestly, probably from my lack of understanding, but I always thought floats to be “hacky” and I never really knew when to clear them afterwards - which is why I tried to learn a bit of flexbox and grid (still very much a beginner as you can tell).
Sometimes I feel like I should have just learned Bootstrap instead
There is a case for the use of float being a bit dated. In the days before display: table and flex it was almost the only way to get a multi column layout. But now there are other methods, though floats still have their uses.
Behave!
Yes, I saw that, but the same can be said for flex.
There have been times that I have found IE’s “partial” support for flex more challenging that no support at all.
When there is no support you can put fall-back methods in place to replicate the layout to best effect.
But when a browser tries to support flex, but gets it wrong, it can be a real pain.
I say: do it right, or don’t do it at all IE!
Exactly! Thing is, that IE 11 implemented older/initial versions of flex and grid before the modules were finalized.
@neil, Honestly I wouldn’t worry too much about IE 11 for your mobile version. Who’s going to be using that on a small screen mobile. Just give IE something that works for desktop if you really feel like you need to support it.
I feel like display:contents is now relatively safe to use for the majority of mobile devices.
Chrome’s support will cover Safari and IOS Safari and Chrome for Android.
After all it will only be needed for mobiles, so the fact that Edge has no support wouldn’t be an issue either.
That’s a good point. Although, I had a look at the caniuse for contents, it shows unsupported for “UC Browser for Android”, not even sure what that is, but apparently 7.1% are using it. I’ll have to think about this one!
Just a question to throw out there for @Ray.H and @SamA74, but I have a feeling I know the answer. Would doing .title { display: none; } be acceptable? Essentially having two titles in both areas, but toggle one on and the other off depending on the screen size?
I did just that for a banner image (background-image) a couple of years ago and it’s still working fine. While it’s never ideal to duplicate content, this occasion was too simple to pass up.