SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Nov 2003
    Location
    Canada
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Question about wrapping text around an image

    I'm having an issue aligning an image with my text. I'm rather new to CSS and I'm not sure if what I want is even possible. I'm trying to get my left aligned text to wrap around the right of an image (as in Quark XPress or Indesign). Also, I want my text to be indented about 20px from my image so that the image can line up along the left with another element on the page without the text interfering. Is there a way to do this with 2 separate layers - the text needs to be easily editable.

    You can see the page at: http://members.shaw.ca/svbodnar/Test...s/Zorianka.dwt
    The image I'm having issues with is the rectangular one with the boots. Any help is greatly appreiciated. Thanks!

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

    You can float the image left and then move it around by using the left margin and keep the text away by using the right margin.

    Something like this:
    Code:
    #ImageFloat {
     float:left;
     margin-right:20px;
     margin-left:-20px;
     position:relative;/* needed for iE6*/
    }
    This will move the image 20px to the left from where it was and also keep the text 20px away from the right. (Take out the align="left" from the html for the image.)

    Hope that helps.

    Paul

  3. #3
    SitePoint Member
    Join Date
    Nov 2003
    Location
    Canada
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot - it worked great! Thats exactly what I wanted it to do.


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
  •