SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Wizard
    Join Date
    Aug 2002
    Location
    N.Ireland
    Posts
    1,046
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Wrap text around an image

    Can someone tell me how, without using tables, I could have an image in a column to the left and text to the right of it which starts from the top and carries on underneath the image. Kinda like the left col of this page www.focused.ie/knowledge.htm except I want the text to carry on below the image.

  2. #2
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you could just float the image to the left, surely ?
    Code:
    CSS:
    
    .newsitem img {
        float: left;
        border: none;
        margin: 1em;
    }
    
    HTML:
    
    <div class="newsitem">
        <img src="blah.jpg" alt="blah!" />
        <p>and some text...if it's long enough, it will wander under the image...</p>
    </div>
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    There are probably other ways to do this but why don't you just float the image left and then add a margin to the <p> tag containing the text that is bigger than the image, so that the text stays to the right of the image.

    If you leave the margin out then the text will still start at the right of the image but will then wrap underneath the image.

    Something like this :
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    <!--
    .outer {
     color: #000000;
     background-color: #FFFFCC;
     height: 300px;
     width: 400px;
     
    }
    .outer img {
     float: left;
    }
    .outer p{
     margin-left:100px;
    }
    -->
    </style>
    </head>
    <body>
    <div class="outer"><img src="images/circle.gif" alt="test image" width="90" height="90" /> 
      <p>Hello this is some text : Hello this is some text : Hello this is some 
    	text : Hello this is some text : Hello this is some text : Hello this is 
    	some text : Hello this is some text : Hello this is some text : Hello this 
    	is some text : Hello this is some text : Hello this is some text : Hello 
    	this is some text : Hello this is some text : Hello this is some text : 
    	Hello this is some text : </p>
    </div>
    </body>
    </html>
    Hope this is what you mean.

    Paul

  4. #4
    SitePoint Wizard
    Join Date
    Aug 2002
    Location
    N.Ireland
    Posts
    1,046
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys, I was floating the div block instead of the image, doh!

  5. #5
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    If you leave the margin out then the text will still start at the right of the image but will then wrap underneath the image.
    which is what he wanted, unless i misunderstood...
    Quote Originally Posted by Daz
    I want the text to carry on below the image
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by redux
    which is what he wanted, unless i misunderstood...
    That's what I thought originally but when I looked at the image in the link Daz provided the text was not wrapping underneath so I wasn't sure if he meant he wanted it that way or not.

    Which is why I provided both.

    Hope I didn't confuse anyone.

    Paul

  7. #7
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    nah...very valid point, paul. re-reading Daz's question, i'm actually not sure myself now
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  8. #8
    SitePoint Wizard
    Join Date
    Aug 2002
    Location
    N.Ireland
    Posts
    1,046
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I wanted the text underneath All was well with this solution until I added another div containing another pic and text. The column now shifts to the bottom of the page. Here's links to both pages to show what I mean

    http://www.focused.ie/knowledge.htm - this is fine
    http://www.focused.ie/knowledge2.htm - this isn't!

  9. #9
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Daz
    the problem is the "Work with valuable knowledge" graphic in that sidebar. it's wider than it should be, making the whole div stretch (in IE anyway...moz firebird lets it bleed out - see attached). you may have to rejiggle your widths to accommodate for it. (rightcol: 255px. image: 274px).
    Attached Images Attached Images
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  10. #10
    SitePoint Wizard
    Join Date
    Aug 2002
    Location
    N.Ireland
    Posts
    1,046
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks redux, that's one problem solved but what I'm getting in IE is that the column drops to the bottom of the page, even when I fix the widths

  11. #11
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you need to make sure that there's enough space left for your right-hand column - including any margins etc - to fit next to the left-hand column. i.e. jiggle around with the widths/margins. i'll have a crack at it later tonight, when i'm at home...as i'm not making much sense today
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Redux is right the best solution would be to shorten the width on your valuable knowledge gif and then everything fits ok.

    Otherwise you will need to shorten your left column to make room for the wider right column.

    Something like this:

    Code:
    #leftcol{
     width: 450px;
     float: left;
    }
    #rightcol{
     background-color: #eeeeee;
     margin-left: 475px;
     padding-left: 10px;
     width: 280px;
     border: 1px dashed #808080;
     padding-bottom: 15px;
    }
    Of course there are many other variations to achieve the same but this should give you the basic idea if you want to keep the width within your 770px content div.

    Hope this helps.

    Paul

  13. #13
    SitePoint Wizard
    Join Date
    Aug 2002
    Location
    N.Ireland
    Posts
    1,046
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul and Redux, problem sorted.

  14. #14
    SitePoint Wizard
    Join Date
    Aug 2002
    Location
    N.Ireland
    Posts
    1,046
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah bum, in Opera the image is floating outside of the right column a bit, why oh why?!

    www.focused.ie/strategy.htm


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
  •