Results 1 to 2 of 2

Thread: Wrapping text around image

  1. #1
    Join Date
    Oct 2007
    Posts
    103

    Wrapping text around image

    How do you display paragraph text aligned near under and over an image like you see in the newspapaers? For exapmle when I write text1 then I insert image1, and then the text2, after displaying text1, under it comes image1, with all sides empty, and under image1, it writes text2...How do you make text1 and or text2 also display at the sides of the picture so it appears nice like text wrapping the image? For example look at the news I just came across,

    http://news.yahoo.com/s/afp/20080609...insportoffbeat

    or say

    http://www.nature.com/news/2008/0806....2008.878.html

    how the news text wraps around the pictures...How do you do that?

  2. #2
    Join Date
    Feb 2006
    Location
    Salisbury UK
    Posts
    4,332
    You use the float function to get text to wrap an image.

    See item 2 here:-
    http://www.wickham43.supanet.com/tutorial/divboxes.html
    and item 2 here:-
    http://www.wickham43.supanet.com/tut...eecolumns.html

    Create a div with text inside and put the image with float: left; inside the text.

    <div>
    <p>Text.............text.</p>
    <img style="float: left;" src="image.jpg" alt="image description">
    <p>More text...............more text.</p>
    </div>
    Code downloaded to my PC will be deleted in due course.
    WIN7; IE9, Firefox, Opera, Chrome and Safari for Windows; screen resolution usually 1366*768.
    Also IE6 on W98 with 800*600 and IE8 on Vista 1440*900.

Posting Permissions

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