Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Re-ordering divs and position/layout, is flexbox the answer? Reply To: Re-ordering divs and position/layout, is flexbox the answer?

#236421
grimski
Participant

Thanks again @Paulie_D. Yeah, that’s what happens when I show someone flexbox and they assume you can move everything around wherever you like! You have no idea the amount of times when there’s an issue I hear, “Well …just use a little javascipt?” No!

I’d still a firm believer in marking up a page, bearing in mind how it will be displayed on different devices using it’s ‘natural flow’, rather than having to drastically change everything at every breakdown – where possible of course, doesn’t always work like that. But I think this is one of the scenarios where it requires a lot of work to potentially display the content in desired layout when amending the mark-up/content/moving the position of the image wouldn’t effect the user and their experience, really.

That said I think I have a solution using floats, though I haven’t testing in IE yet. Unfortunately it still requires the text to be grouped into divs, but needs must I guess.

Using floats and percentage widths:
http://codepen.io/anon/pen/eJvzOO

Using floats and a fixed width image. Requires padding on the container and a negative margin on the image:
http://codepen.io/anon/pen/KVWMPE

I like the simplicity of the former but I’m a bit concerned the image might get too big (or small). So although it’s a bit more CSS and effects the container, maybe the latter is the solution I’ll go for!