running text around an image

[johnvale]

I have been successsfully creating two column pages that include images which can be located to the left or right of the right-hand column with text running around them using the following CSS styles:

/* THIS STYLE IS FOR THE LEFT-HAND PANEL */
div#left {border: 2px solid black; background: white; float: left; width: 180px; margin-top: 10px; margin-left: 5px; margin-right: 10px; padding: 10px; left: 80px; right: 80px; top: 40px;}
div#title {background: #663A00; color: white; font-size: 100%; text-align: left; padding: 5px; font-weight: bold;}
div#left h3 {background: rgb(75%,66%,66%); font-size: 110%; color: #52002d; text-align: center;}
/* THESE STYLES ARE FOR THE MAIN RIGHT-HAND CONTENT PANELS */
/* These styles govern the main topic panel */
div#topic {border: 2px solid black; background: #e7f7e6; float: left; width: 490px; margin-top: 10px; padding: 25px; left: 80px; right: 80px; top: 40px; text-align: justify;}
div#topic h3 {background: rgb(75%,66%,66%); font-size: 110%; color: #52002d; text-align: center;}
div#topic hr {color: #006600;}
div#topic .product {color: #990000;}
div#topic img.left {float: left; clear: left; margin: 0 10px 0 0; padding: 0; border: 0 0 0 0;}
div#topic img.right {float: right; clear: right; margin: 10px 0 0 10px; padding: 0; border: 0 0 0 0;}
div#search {position: absolute; top: 660px; left: 32px; width: 150px; height: 200px; 9px Verdana, Arial, Helvetica, sans-serif; z-index: 100;}

I have now attempted to create a basic 3-column page with a header using exactly the CSS style recommended in Dan Shafer's 'Designing Without Tables'. It works fine until I add an image into the 'Content' style column which is relatively positioned, the left and right columns being absolutely positioned. When I add such an image the adjacent text lines up with the bottom of the image and if I try to have the text run around the image as suggested in Dan's excellent book by using the 'float: left' property, the image disappears beneath the content box.

I've tried everything I can think of, including modifying the z-index properties of the image but nothing helps. Can anyone offer a solution please?

[Gamblingharry]

Might need to put clear:none; in your main content middle column?

[johnvale]

Thanks for the suggestion. I've tried that but unfortunately still doesn't work.

[johnvale]

More investigation reveals that this problem is related to the use of a background color in a div in IE6. Without the background color the code works fine. Hope this information might be of help to others.

[Paul O'B]

Hi,

When you say disapperears beneath he content box do you mean you can't see the image at all? If so have you tried adding position:relative to the floated image as IE likes children of positioned elements to have position relative set.

Paul

[johnvale]

Paul

You are indeed a guru sir. Your suggestion fixed the problem that had otherwise seemed insuperable. Very many thanks for the insight.

Regards

John Vale