how to align floats in IE6

Posted by rei on Stack Overflow See other posts from Stack Overflow or by rei
Published on 2010-05-29T06:30:30Z Indexed on 2010/05/29 6:32 UTC
Read the original article Hit count: 329

Filed under:
|

Good day!

I am having problems displaying floated paragraphs and images in IE6. There was no problem displaying those in Opera and Firefox,though. I have three divs inside a container. Each div has its own paragraph and image either floated to the left or right. In order for me to achieve a desired layout, I set negative margins on most of the paragraphs and images.

Here is how I aligned the floats:

----- CSS code for the first div -----

.row1 { float:left; width:790px; height:460px; margin:5px 0 0 40px; }

.pic1 { float:right; height:460px; width:382px; margin:-100px -50px 0 -60px; }

h2, p { font-family:Arial, Helvetica, sans-serif; }

.row1 p { font-size:12px; text-indent:20px; font-weight:bold; text-align:justify; margin:-10px -25px 0 0; position:relative; }

----------- code for the 2nd div -------------

.row2 { float:left; width:790px; height:234px; margin:-185px 0 0 28px; position:relative; }

.row2 p { float:right; font-size:12px; font-weight:bold; text-align:justify; text-indent:20px; margin:-195px 258px 0 175px; position:relative; }

.pic2 { float:left; }

--------- code for the 3rd div ---------------

.row3 { float:left; width:790px; height:203px; margin:-10px 0 0 40px; position:relative; }

.row3 p { float:left; font-size:12px; font-weight:bold; text-indent:20px; text-align:justify; margin:-180px 265px 0 10px; position:relative; }

.pic3 { float:right; }

/////////

The paragraphs seem to be far away from the images when viewed in IE6. Some paragraphs are overlapping with other images. I hope you can help me with this one.

Thanks, Rei

© Stack Overflow or respective owner

Related posts about css

Related posts about float