[SOLVED] floated div not wrapping around child elements corrently in FF3

[ifubad]

test page http://www.waiming.com/test/pages/catalog.php

 

The floated DIVs wraps around its content as expected in FF2, IE6 & 7, but not FF3

 

I commented out some of the css properties and added borders to make it easier to look at

 

parent DIVs

#catalogContent (dashed black border) it's floated and its automatic width is just enough to wrap around the child thumbnail DIVs plus their outer margins

#subCatalogContent (solid red border)

 

However, in FF3, the div #catalogContent automatic width extends to it's parent div instead, adding the extra space to the right. Can't figure out what is causing that, since it works fine in FF2?

 

 

 

[ifubad]

I added a simplified page http://www.waiming.com/test/tmp.html which is much easier to look at, just enough css to show the problem, where the red dashed border goes all the way across the width of the black parent container in FF3, where it should have been only 10px from the right edge of the blue child DIVs.

 

 

 

[ifubad]

The more I check into this, the more it seems like a bug

[haku]

It's not a bug. Divs are block level elements. Unless you explicitly set the width on a block level element, they expand to fit the width of their containing element. It's what block level elements do.

[ifubad]

No width has been applied to any parent block level elements.

 

When a float is applied to a div or any other elements (either a block or inline), no matter what, it turns into a block. But, unlike a normal block that stretches across the complete width of its parent container, a floated block should wrap around the child. Don't know why there is a difference between FF2 and 3, but take a look at this expanded simplified page http://www.waiming.com/test/floatwrapissue.html, which shows different amounts of child DIVs. In FF2, they all wrap 10px pass the right hand box(es), NOT stretching the full width of its parent container. In FF3, they all wrap the same way, except that when there are too many DIVs to fit on the same row and have to wrap to the second row, then that's when the block stretches the full width of its parent, which does not make sense.

 

1. Look at the bottom examples of the page, the first span has block applied, and it stretches the full width of its parent.

2. The second span has only float applied, which automatically turns into a block, but wraps around the content and NOT stretching across. Just so that it is easy to see, I applied height  to it, since it is a block element now.

[ifubad]

haku, did you miss the part that the DIVs are floated and not just plain old DIVs?

[haku]

yep 

[ifubad]

don't know if it's a bug or not, since all newer browsers does the same thing. Oh well, just have to work around it by setting things fixed for now.