float left & IE6 problems

IE6 breaks containers using float left

[jeremy]

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.

[grahamstewart]

Hi Jeremy,

Welcome to WebmasterWorld [webmasterworld.com]

I just tried to replicate this but it looked fine in IE.
The code I used was...

<div style="border:1px solid red; width: 500px;">
<img style="float:right" src="image.jpg">
<img style="float:right" src="image.jpg">
<img style="float:right" src="image.jpg">
<img style="float:right" src="image.jpg">
hello
</div>

Could you post a code snippet like this that demonstrates your problem?

[hafnius]

Hi Jeremy

I think youve hid upon a bug in ie6. But i am not sure

Give us a code chunk to play with to see what you have.

Can anybody certify that this is indeed a bug in ie6? and maybe some more advice?

Regards
Hafnius

[BlobFisk]

There has been a number of bigs across browsers with the float property, from IE5 on the Mac, to IE6 on the PC.

There is an explaination of the different float bugs is here [positioniseverything.net]. And a solution to the MSIE6 bug here [evolt.org].

[grahamstewart]

The 'bug' that Jeremy may be experiencing is not mentioned in that list (which is very handy by the way, thanks BlobFisk).

I tried to replicate it using the code in post #2 and an image.jpg that was 200px wide. I tried floating the images left and right. But the browser always wrapped the images properly at the edge of the div.

So either Jeremy is doing something different to me or its a bug that has been fixed in my version of IE (version 6.0.2800.1106)

[jeremy]

Hello Graham and all the others that have replied,
A simplified version of the problem is as follows

the CSS is as follows
.imgTable { float:left; margin: 0 1em; }

.container {
width: 480px;
padding: .5em;
margin: .5em 0;
border: 1px solid #804040;
}

.Header { text-align: center; font-size: 1em; font-weight: 600; color: #804040;}

and the html is as follows. The problems occur when I add more than 4 images. In IE they contiue to the edge of the screen, but not in the other browsers. I solved the problem by changing the float:left to float: right.

<div class="container">
<div class="Header">Whatever the heading is</div>
<div class="imgTable"><img src="?.jpg" width="80" height="110" alt="" /></div>
<div class="imgTable"><img src="?.jpg" width="80" height="110" alt=""></div>
<div class="imgTable"><img src="?.jpg" width="80" height="110" alt=""></div>
<div class="imgTable"><img src="?.jpg" width="80" height="110" alt=""></div>
<div class="clearR"></div>
</div>

I figure I could cut out all the divs and just have one (imgTable), followed by the images, but I figured that was not the problem here.

The IE I use is 6.0.2800.1106 etc.

[hafnius]

Hi Jeremy

hmmm i think i lost your there. with your code and 5 images in the container i get the same in IE6 and Moz 1.3 (?) the fifth image wraps till the next line.

Could you please restate the prob that you are having with this setup, Jeremy.

Regards
Hafnius

[jeremy]

Hi hafnius,
I did not test the cut down code I posted, but a little voice in my head said I should have tested it.
I will dig up the source code and re-post it.
Jeremy.