float left & IE6 problems...help!

IE6 breaks containers using float left

[Typester]

Hello all,

Jeremy wrote in this thread: [webmasterworld.com...] "When I float (left) a series of same size images within a container, IE6 breaks the container boundaries and does not wrap till the edge of the screen. All other browsers behave as required.
If I stack the images up using float:right; all is fine and IE behaves properly, keeping the images within the boundaries. Anyone know what might cause this problem."

My problem exactly. His answer was to float the images to the right, but that throws my "content" box out of whack.

Here is my code (hopefully it's pared-down enough):

.content {
position:relative;
width:auto;
margin:0px 210px 10px 170px;
border:1px solid #000;
}

div.float {
text-align: center;
width: 120px;
float: left;
}

div.float p {
text-align: center;
}

div.container {
background-color: #fff;
}

div.spacer {
clear: both;
}

HTML as follows:

<div class="content">
<div class="container">
<div class="spacer">
&nbsp;
</div>

<div class="float">
<img src="image.gif"><br>
<p>blah blah</p>
</div>

<div class="spacer">
&nbsp;
</div>
</div>
</div>

I'm hoping someone has a simple fix! Again, this problem only occurs in IE6. Thanks for any help!

Typester

[ruserious]

Do you have an absoultely positioned box on the right?

I had exactly that situation. I ended up removing the right margin from content, and changing the absolutely positioned box on the right, to a right floated box.Then stuff seemed to work out.

I am afraid I didn't find a solution where IE6 would respect the right-margin of .content when containing left-floated divs.

[Typester]

I do have an absolutely positioned box on the right. I changed it to float: right like you suggested but it didn't change anything.

I removed the right margin of the "content" box and that took care of IE's problem, however, I need that right margin in order to get the box to center in the browser window. Using other methods require absolute positioning. I want a liquid layout.

I believe I will feed IE 6 an alternate stylesheet with a weird workaround I devised. I put an invisible box inside my centered content box using float: right, clear: left. Seems to work.

Anyway, thanks for your help, ruserious. Anyone else have suggestions?

[Typester]

Ha! I've found a solution. After searching high and low for an answer, I still can't believe it works...it's too simple.

I put a 100% width on the container block.

div.container {
width: 100%
background-color: #fff;
}

Other people have experienced this same problem, so I help this helps.