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?

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #236410
    grimski
    Participant

    I have a straight forward layout; a heading, followed by a paragraph, then an image, then more text. This is displayed without floats, cascading quite naturally.

    The problem is the image in the middle.

    The layout I’ve described it applicable on mobile and desktop (960px+), on tablet, my wireframes show the image on the left with the heading and text to the side of it. I guess this is how you’d normally float content around an image or other object, the problem this time is the image is in the middle.

    I’ve created a quick CodePen to show the issue, if you resize your browser to below 600px you’ll see the ‘natural’ (working) layout.

    http://codepen.io/moy/pen/RrpPYV

    You can see I’ve tried to use Flexbox (600px+), but I’m really not sure if it’s suitable for this. I know it’s for layouts, rather than formatting content. All the content is displayed in rows or columns.

    It’s also worth noting that is ‘box’ is used on a few different pages and it’s content varies. Sometimes a paragraph doesn’t come after the image, sometimes there isn’t a one before it.

    The only other solution I can think of right now is absolute positioning the image, with a margin-left which is the width of the image (plus 20px for margin) set on the other elements. That or padding set on the box, which is the width of the image (plus 20px for margin). I’d probably also need to set a min-height on the box element so the image didn’t overflow out of it.

    Maybe floats would work, then I guess the other content would need to be wrapped in a parents div, <div class="text"> for example. So in the CodePen example I’ve given, where there’s 2 groups of content, you’d need 2. 1 around the heading + paragraph. The other just around the last paragraph? Then float the first .text right, the image left, then the final .text right again?

    Anyone have any alternative ideas?

    #236411
    Paulie_D
    Member

    I wouldn’t be in favour of absolute positioning here…it’s just too inflexible.

    You describe a few layouts for this .box…certainly most of these can be managed by flexbox but you would need some fairly hard & fast rules about the stacking most about where you want the image to be.

    If there is “text block” before the image will this be multiple paragraphs or just one. If the former, you would probably need to wrap those in a separate div so that they can always take first order.

    Ditto for any text after the image.

    Basically, for flexbox to work effectively I’d envisage a structure something like this.

    <div class="box">
      <h1></h1>
      <div class="textblock">
        Your Preceding Text
        In Here
      </div>
      <img src="" alt="" />
      <div class="textblock">
        Your Following Text
        In Here
      </div>
    </div>
    
    </div>
    

    Now…this won’t allow the text to wrap around the image at wide screen sizes…is that a definite requirement?

    It would be easier to offer advice if we had a glimpse of the wireframes to be honest. Flexbox can do a lot but it’s not the answer to everything.

    #236413
    grimski
    Participant

    Thanks @Paulie_D, yeah I had a feeling the content would need to be grouped.

    I also have a feeling Flexbox might not be the answer due to how the content needs to be laid out. Due to the length of the text, the content should sit horizontal to the image – wrapping is not a necessity but the 2nd block of text shouldn’t sit below the image if there’s enough space.

    I’ve uploaded images and posted them before but I’ve always wondered what the recommended sites are, what would you recommend and I’ll upload screenshots of the wireframes?

    Boss making things awkward for me, I’m tempted to just hide the image!!

    #236414
    Paulie_D
    Member

    I use Photobucket.com

    #236415
    grimski
    Participant

    Couldn’t find my password for that, so I’ve just used postimage for now. I don’t have the actually wireframe to hand, so I’ve quickly mocked something up:

    http://s30.postimg.org/sijqfxemp/wireframe.jpg

    This shows the 3 stages. Mobile first, then tablet (not this is a group of 3 columns, the other 2 are above it). Finally desktop, where you can see the box in relation to the other 2 boxes. The other boxes don’t impact the issue I’m having but I thought it might be useful to have some context.

    Alternatively, the image could be positioned to the right – but I imagine that wouldn’t make like any easy, it’s essentially the same problem.

    #236418
    Paulie_D
    Member

    Hmmm…, not sure flexbox can help here.

    I’ve played a bit and I think it’s going to be a struggle.

    If I’m right, there is a CSS property on the way (display:contents) which might help in the future but right now it’s a little too much.

    #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!

    #236425
    gcyrillus
    Participant

    hello,

    maybe display:grid; will be helpfull in the future.

    Here, if .image has known and fixed size, then the absolute/static position + min-height could do it .(mind box-sizing).

    http://codepen.io/anon/pen/WrpGzo

    you can still use flex to vertical-align content aside image when not as tall as image

    http://codepen.io/anon/pen/ZQepjv

    #236440
    grimski
    Participant

    Thanks @gcyrillus, yeah maybe display: grid; will solve problems like this in the near future!

    I suppose there’s not a lot of difference from my approach and the 2 you’ve listed but your versions have the added benefit of being able to centre the content, which would be very handy for me.

    Essentially my content has been taken out of the flow in a roundabout way and although I’d prefer not to use position: absolute;, I can’t see any reason why it would render any differently than my example – providing a min-height is set on the container. It also has the added benefit of not needing to wrap additional content in divs to float them!

Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘CSS’ is closed to new topics and replies.