- This topic is empty.
January 5, 2016 at 4:03 am #236410
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.
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
.textright, the image left, then the final
Anyone have any alternative ideas?January 5, 2016 at 5:39 am #236411
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.January 5, 2016 at 6:02 am #236413
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!!January 5, 2016 at 6:05 am #236414
I use Photobucket.comJanuary 5, 2016 at 6:36 am #236415
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:
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.January 5, 2016 at 7:52 am #236418
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.January 5, 2016 at 8:57 am #236421
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:
Using floats and a fixed width image. Requires padding on the container and a negative margin on the image:
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!January 5, 2016 at 10:59 am #236425gcyrillusParticipant
display:grid;will be helpfull in the future.
.imagehas known and fixed size, then the absolute/static position + min-height could do it .(mind box-sizing).
you can still use flex to vertical-align content aside image when not as tall as imageJanuary 6, 2016 at 2:56 am #236440
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-heightis set on the container. It also has the added benefit of not needing to wrap additional content in divs to float them!
- The forum ‘CSS’ is closed to new topics and replies.