How do I put an image in the flow of text?

Discussion in 'CSS' started by bobby9101, Apr 20, 2007.

0
  1. #1
    I am looking to do:

    TEXT TEXT TEXT | IMAGE TOP
    TEXT TEXT TEXT | IMAGE MIDDLE
    TEXT TEXT TEXT | IMAGE BOTTOM
    TEXT TEXT TEXT TEXT TEXT TEXT
    TEXT TEXT TEXT TEXT TEXT TEXT
    TEXT TEXT TEXT TEXT TEXT TEXT

    So the text flows down and around the image.
    How do I do that? Many thanks in advance
     
    bobby9101, Apr 20, 2007 IP
  2. webcosmo

    webcosmo Notable Member

    Messages:
    5,840
    Likes Received:
    153
    Best Answers:
    2
    Trophy Points:
    255
    #2
    use a style for image with clear:right;
    that will do. make sure you place the image on code before text.
     
    webcosmo, Apr 20, 2007 IP
  3. bobby9101

    bobby9101 Peon

    Messages:
    3,292
    Likes Received:
    134
    Best Answers:
    0
    Trophy Points:
    0
    #3
    doesn't seem to be working
     
    bobby9101, Apr 20, 2007 IP
  4. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #4
    I believe he meant to say {float: right;} 
    
img {
  float: right;
  }
=========
<p><img src="some.png" alt="" /> wrapping text</p>
    Code (markup):
    cheers,

    gary
     
    kk5st, Apr 20, 2007 IP
  5. webcosmo

    webcosmo Notable Member

    Messages:
    5,840
    Likes Received:
    153
    Best Answers:
    2
    Trophy Points:
    255
    #5
    yes. meant float along with clear. here is a complete example. hope it helps.

    <html>

    <head>
    <style>
    .rtimg {clear:right;float:right;}
    </style>
    </head>

    <body>

    <img class="rtimg" src="a.jpg" border="0">
    aaaaaaaaaaaa ssssssssssss aaaaaaaaaaaa ssssssssssss aaaaaaaaaaaa ssssssssssss aaaaaaaaaaaa ssssssssssss aaaaaaaaaaaa ssssssssssss aaaaaaaaaaaa ssssssssssss aaaaaaaaaaaa ssssssssssss aaaaaaaaaaaa ssssssssssss aaaaaaaaaaaa ssssssssssss aaaaaaaaaaaa ssssssssssss aaaaaaaaaaaa ssssssssssss aaaaaaaaaaaa ssssssssssss aaaaaaaaaaaa ssssssssssss aaaaaaaaaaaa ssssssssssss aaaaaaaaaaaa ssssssssssss
    aaaaaaaaaaaa ssssssssssss aaaaaaaaaaaa ssssssssssss aaaaaaaaaaaa ssssssssssss aaaaaaaaaaaa ssssssssssss aaaaaaaaaaaa ssssssssssss aaaaaaaaaaaa ssssssssssss aaaaaaaaaaaa ssssssssssss aaaaaaaaaaaa ssssssssssss aaaaaaaaaaaa ssssssssssss aaaaaaaaaaaa ssssssssssss aaaaaaaaaaaa ssssssssssss aaaaaaaaaaaa ssssssssssss aaaaaaaaaaaa ssssssssssss aaaaaaaaaaaa ssssssssssss
    aaaaaaaaaaaa ssssssssssss aaaaaaaaaaaa ssssssssssss aaaaaaaaaaaa ssssssssssss aaaaaaaaaaaa ssssssssssss aaaaaaaaaaaa ssssssssssss aaaaaaaaaaaa ssssssssssss aaaaaaaaaaaa ssssssssssss aaaaaaaaaaaa ssssssssssss aaaaaaaaaaaa ssssssssssss aaaaaaaaaaaa ssssssssssss

    </body>

    </html>
     
    webcosmo, Apr 20, 2007 IP