Ragged Float

[SeaveeB]

I am using a technique from CSS Edge by Eric Myer, I wanted to create text floating around teh conotours of the image. I did this, but I am having a hard time getting the text to actually float around the image without being covered by it anywhere. I used absalute positioning, which I am not sure I should have used but to keep the image on top of the text I had to use a Z-index.

This is the style sheet code to the image. There are 7 image slices with different positions.

img#rose1 {
position: absolute;
top: 10px;
left: 540px;
height: 140px;
width: 236px;
border: none;
float: left;
clear: left;
z-index: 1;
}

This is the HTML, again, 7 times:

<img id="rose1" src="URL">
<img id="rose2" src="URL">

I removed the URLs to stay in compliance with the forums, but will be glad to E mail them.

[mipapage]

I believe that you have to float the image slices in order for this method to work properly, rather than use absolute positioning... Otherwise you'll probably have to absolutely position both the text and the images...

<update>
I just checked the site, and sure enough you do - it's all about floating. If yer having troubles, can you make the background color of the image transparent, therefore bypassing the z-index necessity?

[SeaveeB]

When I take out the absalute positioning I end up with the pictures moved all kinds of weird places over the screen, instead of in the top right hand corner

[willybfriendly]

I wanted to create text floating around teh conotours of the image.

Another way to do this is set the image as a background and then use empty div's to control the flow of the text. Search the WW site and you will find a post by PapaBear with details.

WBF