View Full Version : Help to position image correctly within text.

02-06-2005, 10:47 PM

Would anyone be able to tell me the correct/best way to position an image within a block of text, so that the text flows around the right of the image? ... do I need to define a styled DIV that contains the image?


Here's what I have. It seems to work in Mac Safari, but the text to right of the image gets pushed out of my middle column (div id=content) - and also it seems to affect my background image, cutting it off....And while I'm at it....how can I position my image so that it lines up with the text to the left, but has, say, a 10px gap to the right?

Also, I'd like to position a bit of text aligned centrally under the image. How's that done?

Am a newbie with CSS. Confusion currently reigning....


02-07-2005, 12:48 AM
Hey there,

Did you get it fixed? I just checked the site and it looks fine (on both FF and Safari on OSX)...

Just in case, I'd recommend floats for this. That's exactly what they were made for-- aligning text around images. They can be a bit tricky at first but once you get the hang of them you can use them for damn near everything.

Here's a pretty good tutorial on the subject: http://css.maxdesign.com.au/floatutorial/

Hope it helps,

02-07-2005, 12:56 AM
Cheers Richard. Just found Floatutorial. Just the ticket. But I wonder if you can help. Here's what I have:

Ok, but I'd like to center and wrap the caption underneath the image, and have the main text of the article flow down the left hand side of the image. Can't seem to make it so....

Any ideas...?



02-07-2005, 12:56 AM
Oops. I mean I'd like the text to flow down the righthand side of the image....


02-07-2005, 01:01 AM
Heh, just as a completely irrelevant aside - I live in Hyndburn - in sunny Accy no less :thumbsup:

Small world ;)

02-07-2005, 01:10 AM
Hey! Great Stuff!
I don't ... but James does ... in Sunny Rishton....

Andrew. :)

02-07-2005, 01:48 AM
You could wrap the image and caption in a div and float that...

<div class="photos">
<img src="photo.jpg" alt="glorious photo" />
<p>A glorious photo showcasing remarkable photographic skill.</p>

.photos {
float: left;
padding: 5px;
width: auto;
text-align: center;

It should work... you could also markup photos in a definition list although that might be a little overkill for one or two photos on a page.