CSS: Wrapping text around a fixed image?

chancey · 27th October 2009, 3:23 PM

I have a fixed width contentpage (800px) and I want to be able to place images of a fixed size at an absolute position inside the main content div, but have the text naturally flow around it. I don't want to use a paragraph tags because the position of the image still depends on where it is placed inside the paragraph tag. Example

Code:

+----------------------+
| ............ +-----+ |
| ............ |     | |
| ............ +-----+ |
| +---+ .............. |
| |   | .............. |
| +---+ .............. |
| .................... |
+----------------------+

Where the boxes would be the fixed size images. And the dots being the naturally flowing text.

Any ideas? Thanks

Rezin · 27th October 2009, 3:25 PM

float: left/right?

http://css.maxdesign.com.au/floatutorial/

chancey · 27th October 2009, 3:42 PM

Quote:

Originally Posted by Rezin

float: left/right?

http://css.maxdesign.com.au/floatutorial/

Thats a good guide. I can now get the image to sit properly on the left/right/both but only at the top. However if I try and shift the 'top' to say 100px, the image leaves a space at the top of the page and moves the image directly down over the text... Can I use another attribute to tell it move down the left or right side?

Rezin · 27th October 2009, 3:55 PM

Any chance you can upload your test page... maybe to your ISP space or something?

Also, the location of the <img> tag in the text, when using float:left/right, will affect where in the text the image is shown.

chancey · 27th October 2009, 4:05 PM

Quote:

Originally Posted by Rezin

Any chance you can upload your test page... maybe to your ISP space or something?

Also, the location of the <img> tag in the text, when using float:left/right, will affect where in the text the image is shown.

http://mavenlang.com/csstest/csstest.php

I realise that by moving the images it will change their vertical location, but this will be database generated and so php wont know where to put the images.

If I could keep the images with their absolute positions at the top then the content follows that would be ideal.

EDIT: I put the css into the main file, and as much as I hate microsoft this has to be friendly with IE6.

27th October 2009, 3:23 PM	#1
chancey Member Join Date: Jan 2005 Location: Sydney Posts: 1,414	CSS: Wrapping text around a fixed image? I have a fixed width contentpage (800px) and I want to be able to place images of a fixed size at an absolute position inside the main content div, but have the text naturally flow around it. I don't want to use a paragraph tags because the position of the image still depends on where it is placed inside the paragraph tag. Example Code: +----------------------+ \| ............ +-----+ \| \| ............ \| \| \| \| ............ +-----+ \| \| +---+ .............. \| \| \| \| .............. \| \| +---+ .............. \| \| .................... \| +----------------------+ Where the boxes would be the fixed size images. And the dots being the naturally flowing text. Any ideas? Thanks __________________ MusicBrainz AutoEditor \| Last.fm: chancey (170,000+ plays) Laptop: Unibody MacBook 2.4ghz, 4GB DDR3, 750GB Desktop: Mac Pro (8-core) 2.8Ghz, 6GB ECC RAM Server: Norco 4220, Q9550, 4GB 1066Mhz, 3ware 9650SE-16ML, 31TB, Fedora 10 x64

27th October 2009, 3:25 PM	#2
Rezin Member Join Date: Oct 2002 Posts: 8,025	float: left/right? http://css.maxdesign.com.au/floatutorial/

27th October 2009, 3:55 PM	#4
Rezin Member Join Date: Oct 2002 Posts: 8,025	Any chance you can upload your test page... maybe to your ISP space or something? Also, the location of the <img> tag in the text, when using float:left/right, will affect where in the text the image is shown.