SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2013
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    stopping adjacent images text wrap

    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. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,456
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    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. #3
    SitePoint Enthusiast
    Join Date
    May 2013
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,456
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    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. #5
    SitePoint Enthusiast
    Join Date
    May 2013
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    SitePoint Enthusiast
    Join Date
    May 2013
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #7
    SitePoint Enthusiast
    Join Date
    May 2013
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #8
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,456
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by rolanstein View Post
    Ronpat, firstly, thanks for your excellent code recommendation. Works great.

    How did you calculate that the width of the page for the media query should be 978px?

    Cheers
    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.

  9. #9
    SitePoint Enthusiast
    Join Date
    May 2013
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •