PDA

View Full Version : Wrapping text around image



ketanco
10 Jun 2008, 12:03 AM
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/od_afp/francebritainsportoffbeat

or say

http://www.nature.com/news/2008/080606/full/news.2008.878.html

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

Wickham
10 Jun 2008, 02:08 AM
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/tutorial/threecolumns.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>