SitePoint Sponsor

User Tag List

Results 1 to 19 of 19
  1. #1
    SitePoint Enthusiast paul_sideradesig's Avatar
    Join Date
    Jan 2010
    Location
    brazil
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question wrap paragraphs around image

    I'm trying to get 2 paragraphs to wrap around one image, but I can only get one of them to wrap


    the html code is
    <div>
    <p>First paragraph</p>
    <div>Image
    <p>Image caption</p>
    </div>
    <p>Second paragraph</p>

    thanks for any suggestions

  2. #2
    SitePoint Enthusiast
    Join Date
    Aug 2008
    Location
    Central California
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you have any css code behind that? If not I think giving the text a float: left; property might fix your problem.

  3. #3
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Hi paul,

    your problem is interesting and it is not easy. The reason it's not easy is because if I were to try to duplicate that, I'd have to insert the image after "vestibulum erat" and then float it right to get the rest of the text to wrap at the correct spot. And that's a brittle way of doing it, since anyone having a slightly larger or smaller font size means the wrapping won't look right.

    Hmm... I'm almost thinking this is something someone would do in one of the CSS quizzes. You're trying to imitate print, and this is something CSS sometimes gets really clunky with.

  4. #4
    SitePoint Enthusiast paul_sideradesig's Avatar
    Join Date
    Jan 2010
    Location
    brazil
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for your quick answers!

    I tried floating the text but it doesn't help.
    I'm going to look into the new CSS3 layouts, maybe that will help

  5. #5
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    No, don't float the text, float the image.

    There *might* be something for this specifically in CSS3 (I'm thinking about how they've started implementing "columns" in the way a newspaper does) but even if there is something, it may only be implemented in a single browser. CSS3 is coming out in "modules" and even after that, you've got to wait for browser support... unless you're writing for a single browser (like an iPhone app or an intranet).

  6. #6
    SitePoint Enthusiast paul_sideradesig's Avatar
    Join Date
    Jan 2010
    Location
    brazil
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually I just found out how to do it!
    I found this article:http://www.alistapart.com/articles/crosscolumn/
    so I put the image inside a span, in the middle of the first paragraph with a negative margin and I get the desired result.

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,746
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    This currently isn't possible what you are trying to achieve, unless you do something like slantastic (Eric meyers site for details)

    CSS3 doesn't have something for this (even if there is some module I haven't heard about, support would be miniscule )
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  8. #8
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    There is this if it's any help... http://www.bigbaer.com/css_tutorials....text.wrap.htm

  9. #9
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EricWatson View Post
    I was about to post that sandbag technique but i can't understand it myself lol. Never got it to work...
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  10. #10
    SitePoint Enthusiast paul_sideradesig's Avatar
    Join Date
    Jan 2010
    Location
    brazil
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Luki_be View Post
    I was about to post that sandbag technique but i can't understand it myself lol. Never got it to work...
    It's OK, the technique I found at A list apart works for me.

    Hey I'm also from Belgium living in Brazil!

  11. #11
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Paul, the ALA technique is tricksy. I like it, but...

  12. #12
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_sideradesig View Post
    It's OK, the technique I found at A list apart works for me.

    Hey I'm also from Belgium living in Brazil!
    PM'd you
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  13. #13
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_sideradesig View Post
    Actually I just found out how to do it!
    I found this article:http://www.alistapart.com/articles/crosscolumn/
    Hi,
    I do remember reading that article some time ago. That technique does produce a nice result when used along with two floated columns as they show in Example 4.

    However, if you are just wanting two separate paragraphs to wrap around the image in a single column setup then I see no reason why a Single Sandbag Float would not work for you.

    As you can see it has no problem stopping one paragraph midway down the float and starting the next one. If the height of the sandbag float was to be set in ems then the floated image would stay proportionally positioned with the text.

  14. #14
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    Hi,
    I do remember reading that article some time ago. That technique does produce a nice result when used along with two floated columns as they show in Example 4.

    However, if you are just wanting two separate paragraphs to wrap around the image in a single column setup then I see no reason why a Single Sandbag Float would not work for you.

    As you can see it has no problem stopping one paragraph midway down the float and starting the next one. If the height of the sandbag float was to be set in ems then the floated image would stay proportionally positioned with the text.
    Ray, any chance to let that demo online a few days? I'd like to study it because i never could get that sandbag technique to work properly...
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  15. #15
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Luki_be View Post
    Ray, any chance to let that demo online a few days? I'd like to study it because i never could get that sandbag technique to work properly...
    That one has been there a long time Luki. I have some more in a "Sandbag" section of my demos. (link in sig)

    Quote Originally Posted by Rayzur View Post
    If the height of the sandbag float was to be set in ems then the floated image would stay proportionally positioned with the text.
    Here is one I just put together that uses all ems for sizing and two paragraphs of equal text amounts. (probably would not happen in a real world case)

    It seems to hold together very well with "zoom" and "zoom text only" (FF)

    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Scaling Sandbag Float</title>
     
    <style type="text/css">
    body {
        background: #fff;
        font-size:100%;
        margin:0;
        padding:0;
    }
    #wrapper {
        width:26em;
        margin:1em auto;
        padding-top:.6em;
        overflow:hidden;
        background:#EEF;
        border:1px solid #000;
    }
    #sandbag{
        float:right;
        width:5px;
        height:7em;
        background:red;
    }
    #image{
        float:right;
        clear:right;
        width:10em;
        height:5em;/*10em total*/
        border-top:5em solid #000;
        margin:.5em .6em 0;
        background:#333;
    }
    p{
        margin:0 .6em .5em;
        text-align:justify;
    }
    h1{
        font-size:1.6em;
        padding-top:.2em;
        text-align:center;
    }
    </style>
    </head>
    <body>
    <h1>Scaling Sandbag Float</h1>
    <div id="wrapper">
        <div id="sandbag"></div>
        <div id="image"></div>
        <p>Lorem ipsum dolor sit amet consectetuer justo nec ut ac enim. Auctor dictumst quis egestas ut 
        cursus mauris augue fringilla orci pede. Vel a est at semper sed natoque eleifend id convallis Donec. 
        Augue ut congue ac tellus dignissim Ut pretium Nullam sed Nunc. Nec elit dui Nullam parturient In ut 
        elit Curabitur id at. Vestibulum Cum id Donec sagittis pede tristique non ipsum Sed et. Vestibulum 
        Cum id Donec sagittis pede tristique non ipsum Sed et.</p>
        <p>Lorem ipsum dolor sit amet consectetuer justo nec ut ac enim. Auctor dictumst quis egestas ut 
        cursus mauris augue fringilla orci pede. Vel a est at semper sed natoque eleifend id convallis Donec. 
        Augue ut congue ac tellus dignissim Ut pretium Nullam sed Nunc. Nec elit dui Nullam parturient In ut 
        elit Curabitur id at. Vestibulum Cum id Donec sagittis pede tristique non ipsum Sed et. Vestibulum 
        Cum id Donec sagittis pede tristique non ipsum Sed et.</p>
    </div>
     
    </body>
    </html>

  16. #16
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great, already checking it out
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  17. #17
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Ray, the Examiner uses something like your "sandbag float" technique in the template for its stories. The difference is, their code is horrendous.

  18. #18
    SitePoint Enthusiast paul_sideradesig's Avatar
    Join Date
    Jan 2010
    Location
    brazil
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks Rayzur, I'll be sure to check that out.

    thanks to everyone who contributed!

  19. #19
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:

    Paul, did you check your PM?
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need


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
  •