Stopping adjacent images text wrap

HTML & CSS
1

Hi folks. I’ve run out of ideas on how to stop text wrapping with side-by-side images. Pls see this link: http://ppredesign.perthpunk.com/the-orphans/

I’m referring to the first set of adjacent images under the paragraph headed “Once An Orphan, Always An Orphan”.

I’ve tried enclosing the images in divs and styling them with CSS, messing around with things like float:none, but haven’t managed to stop the text wrapping. I’ve also tried putting the para of the text that is wrapping in divs and messing with margin-top, but again, nothing stops the wrapping.

If anyone could help, would be much appreciated.

BTW, I’m mid-way through experimenting with the design of this site and trying different things as I try to come to grips with CSS; hence the CSS boxes at the top of this page. So, pretty unsightly, I know. The finished job is a long way off yet.

Cheers

2

How do you want the text to behave? The wrapping text behavior I’m seeing is normal, so the problem, the desired behavior, isn’t clear.

3

Hi ronpat. In my browser (Firefox 21.0) I’m seeing a thin column of text down the right side of the right image. I want the text to start underneath the two images, not wrapping down the right side of them.

I’ve taken a screenshot, but it won’t upload here for some reason. It’s only 52.7kb, so would think that’s acceptable in size. Anyway, I’ve temporarily uploaded it to my web page so you can see it (at the very bottom).

Cheers

4

I saw the thin column of text, but also noticed that as the screen narrows, the images shift over and under each other and the text has room to flow beside them… which looks good… a desirable fluid behavior. You can give that next paragraph a class and assign {clear:both} through a media query so the text does not flow beside the images when the width of the page is greater than 978px (or thereabouts).

5

Thanks very much, ronpat. Hmm, well from a design POV, if you think the images look better vertically aligned, rather than horizontally, with the text flowing beside on the right, maybe I should just go with that and be done with it. I can easily achieve that look just by aligning both images to the left, I think.

Cheers!

6

Thanks very much, ronpat. Hmm, well from a design POV, if you think the images look better vertically aligned, rather than horizontally, with the text flowing beside on the right, maybe I should just go with that and be done with it. I can easily achieve that look just by aligning both images to the left, I think.

Cheers!

7

Ronpat, firstly, thanks for your excellent code recommendation. Works great.

May I ask a question as part of my ongoing CSS education, pls (doubtless I’ll be exposing the yawning gaps in my basic knowledge)? How did you calculate that the width of the page for the media query should be 978px?

Cheers

8

Hi, rolanstein,

You’re very welcome. Thanks for the feedback and I’m glad it works for you.

I stretched and narrowed the browser window and found the points at which the text stopped flowing beside the images and the point at which the images shifted (just a couple or three pixels difference). I then used a utility called “Screen Calipers” to measure the width of the browser window at those points and picked a value close the point where the images shift as a desirable @media breakpoint.

I was lazy. :slight_smile:

9

I like that kinda lazy, ronpat! Ta for the heads up on “Screen Callipers” - sounds like just what I need. I’ve been messing around with Firebug, but I often find it confusing. I guess it would help to check out the user instructions…duh.

Cheers and thanks again for your help and clear explanations.