how to cover the area below a picture with text

**nofel** · May 9, 2009, 04:05

hey all. how can i make text flow/fill up the space below an image which is 100*100 coz typically in tables the col in which image is empty and the text is in 2nd col. just take a example of any text and images site like bbc. where the image end the paragraph that was coming parrallel to pic spread to this end of pic.

**eruna** · May 9, 2009, 07:36

use a background image

**nofel** · May 9, 2009, 11:40

Originally Posted by eruna

use a background image

wht will i do with background image...

**eruna** · May 9, 2009, 13:10

can you provide an example of what you are trying to do?

**nofel** · May 9, 2009, 13:14

well take this example http://www.sitepoint.com/blogs/2009/...ing-deadlines/ the text parallel to the picture is according to the width of picture but as soon as the picture end the paragraph ends. the text take up all the place beneath the picture area. that what i am asking. hope u got it

**johnyboy** · May 9, 2009, 15:06

is this the kind of thing you mean?: http://www.tizag.com/cssT/float.php

**Tsid** · May 12, 2009, 14:11

Or maybe try this one - without floating:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Image in text</title>
</head>
<body>

<p><img src="images/sample.gif" width="100" height="200" alt="image here" align="left" vspace="5" hspace="5">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

</body>
</html>

**CKEANEDesign** · May 24, 2009, 18:59

In your example CSS is being used. The img tag nested inside of a paragraph tag will put images to the right of blocks of text.

If you want to learn the specifics of that, the CSS forum is very helpful

**JamesColin** · May 24, 2009, 19:11

the easiest is to use style="float:left" on the img tag and put the image before the text, I think that will do it crudly.
Otherwise I always do a div style="float:left;margin-right: 4px;bottom-margin: 2px;" and then I put the img in the div (and I clode the div after of course)
and then after comes the text.

The SitePoint Forums have moved.

User Tag List

Thread: how to cover the area below a picture with text

Thread Tools

Display

how to cover the area below a picture with text

Bookmarks

Bookmarks

Posting Permissions