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: 360
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