Wrap text around an image

**Daz** · Jul 8, 2003, 03:58

Can someone tell me how, without using tables, I could have an image in a column to the left and text to the right of it which starts from the top and carries on underneath the image. Kinda like the left col of this page www.focused.ie/knowledge.htm except I want the text to carry on below the image.

**redux** · Jul 8, 2003, 04:11

you could just float the image to the left, surely ?

Code:

CSS:

.newsitem img {
    float: left;
    border: none;
    margin: 1em;
}

HTML:

<div class="newsitem">
    <img src="blah.jpg" alt="blah!" />
    <p>and some text...if it's long enough, it will wander under the image...</p>
</div>

**Paul O'B** · Jul 8, 2003, 04:14

Hi,

There are probably other ways to do this but why don't you just float the image left and then add a margin to the <p> tag containing the text that is bigger than the image, so that the text stays to the right of the image.

If you leave the margin out then the text will still start at the right of the image but will then wrap underneath the image.

Something like this :

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
.outer {
 color: #000000;
 background-color: #FFFFCC;
 height: 300px;
 width: 400px;
 
}
.outer img {
 float: left;
}
.outer p{
 margin-left:100px;
}
-->
</style>
</head>
<body>
<div class="outer"><img src="images/circle.gif" alt="test image" width="90" height="90" /> 
  <p>Hello this is some text : Hello this is some text : Hello this is some 
	text : Hello this is some text : Hello this is some text : Hello this is 
	some text : Hello this is some text : Hello this is some text : Hello this 
	is some text : Hello this is some text : Hello this is some text : Hello 
	this is some text : Hello this is some text : Hello this is some text : 
	Hello this is some text : </p>
</div>
</body>
</html>

Hope this is what you mean.

Paul

**redux** · Jul 8, 2003, 04:50

Originally Posted by Paul O'B

If you leave the margin out then the text will still start at the right of the image but will then wrap underneath the image.

which is what he wanted, unless i misunderstood...

Originally Posted by Daz

I want the text to carry on below the image

**Daz** · Jul 8, 2003, 04:28

Thanks guys, I was floating the div block instead of the image, doh!

**Paul O'B** · Jul 8, 2003, 05:47

Originally Posted by redux

which is what he wanted, unless i misunderstood...

That's what I thought originally but when I looked at the image in the link Daz provided the text was not wrapping underneath so I wasn't sure if he meant he wanted it that way or not.

Which is why I provided both.

Hope I didn't confuse anyone.

Paul

**redux** · Jul 8, 2003, 07:44

nah...very valid point, paul. re-reading Daz's question, i'm actually not sure myself now

**Daz** · Jul 8, 2003, 23:42

I wanted the text underneath

All was well with this solution until I added another div containing another pic and text. The column now shifts to the bottom of the page. Here's links to both pages to show what I mean

http://www.focused.ie/knowledge.htm - this is fine
http://www.focused.ie/knowledge2.htm - this isn't!

**redux** · Jul 9, 2003, 01:01

Originally Posted by Daz

http://www.focused.ie/knowledge2.htm - this isn't!

the problem is the "Work with valuable knowledge" graphic in that sidebar. it's wider than it should be, making the whole div stretch (in IE anyway...moz firebird lets it bleed out - see attached). you may have to rejiggle your widths to accommodate for it. (rightcol: 255px. image: 274px).

**Daz** · Jul 9, 2003, 05:43

thanks redux, that's one problem solved but what I'm getting in IE is that the column drops to the bottom of the page, even when I fix the widths

**redux** · Jul 9, 2003, 07:35

you need to make sure that there's enough space left for your right-hand column - including any margins etc - to fit next to the left-hand column. i.e. jiggle around with the widths/margins. i'll have a crack at it later tonight, when i'm at home...as i'm not making much sense today

**Paul O'B** · Jul 9, 2003, 08:33

Hi,

Redux is right the best solution would be to shorten the width on your valuable knowledge gif and then everything fits ok.

Otherwise you will need to shorten your left column to make room for the wider right column.

Something like this:

Code:

#leftcol{
 width: 450px;
 float: left;
}
#rightcol{
 background-color: #eeeeee;
 margin-left: 475px;
 padding-left: 10px;
 width: 280px;
 border: 1px dashed #808080;
 padding-bottom: 15px;
}

Of course there are many other variations to achieve the same but this should give you the basic idea if you want to keep the width within your 770px content div.

Hope this helps.

Paul

**Daz** · Jul 9, 2003, 23:19

Thanks Paul and Redux, problem sorted.

**Daz** · Jul 10, 2003, 06:44

Ah bum, in Opera the image is floating outside of the right column a bit, why oh why?!

www.focused.ie/strategy.htm

The SitePoint Forums have moved.

User Tag List

Thread: Wrap text around an image

Thread Tools

Display

Hybrid View

Wrap text around an image

Bookmarks

Bookmarks

Posting Permissions