how to align floats in IE6

Question

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 container -----

.container {
clear:both;
background:url(images/content_bg.png) repeat-x scroll 0 0 transparent;
width:850px;
height:750px;
overflow:hidden; 
margin:0 auto;
}

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

.ro2 {
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 divs' height ( .row1 to .row3) are based on the images' heights so that the div can contain both the paragraphs and the pictures. 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.

Answer 1

IE6 it's not supported and contains many "bugs"... you should be developing for IE7 and above...

regarding your css:

you're using position:relative; but not setting any coordinates, IE6 doesn't like that, try removing it!

You don't show where all of does classes are applied, some HTML tags don't go well with margin in IE6, try using padding instead.

a good way for you to work well in IE6 is to use table instead of div, but div works just fine like this:

<div class="container" style="width:800px;">

  <div class="block" style="width:750px;margin:0 auto;">
    <div class="img_container" style="float:left;width:350px;"></div>
    <div class="txt_container" style="float:right;width:400px;"></div>
  </div>

  <div class="block" style="width:750px;margin:0 auto;">
    <div class="img_container" style="float:left;width:350px;"></div>
    <div class="txt_container" style="float:right;width:400px;"></div>
  </div>

  <div class="block" style="width:750px;margin:0 auto;">
    <div class="img_container" style="float:left;width:350px;"></div>
    <div class="txt_container" style="float:right;width:400px;"></div>
  </div>

</div>

This is an example, just to illustrate that you should for IE6 wrap the text and images inside a div and that div is the one to float...

Hope it helps...

Answer 2

IE6 has a bug affecting floats which makes margins double their actual value. I bet this is the issue, seeing as you have margins set, and said "The paragraphs seem to be far away from the images when viewed in IE6. Some paragraphs are overlapping with other images."

Thankfully, there is an easy fix for this - anytime you set a float, also set 'display:inline'. If won't affect other browsers, and will stop IE 6 from doubling the margins.

See positioniseverything's article on this. Note you have to view the page in IE6 for the examples to make sense.