how to align floats in IE6
- by rei
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
