float: left divs don't float properly in netscape

[danyon]

I'm working on a small site done largely in css (the nav is in a table, I just didn't feel like fighting with it in css this time) here:

http://www.danyon.com/atomicclock/screening2.htm

and the css file is located here

http://www.danyon.com/atomicclock/ac1.css

I'm checking it in Win2k IE 6 and Mozilla 1.6, and Mac OS 9 IE and Netscape 7 (not on OS X yet, sadly)

The images are all contained in "vidthumb" class divs (they were previously spans, and that didn't change my problem); on Win IE they're fine, on Mac IE the last div overlaps the bottom containing div frame, but things really fall apart on Netscape (both platforms); all the Vidthumb divs display in a single vertical line, not two-per-line as intended, and I cannot figure out why this is. The dimensions are sound, there should be enough room for them to float two-to-a-line, I've even but xhtml-compliant <br /> tags in to ensure the divs aren't interpreted as 'empty'. Can anyone help me with this problem?

 

[Vragabond]

Looks like a box model problem. When computing width, IE will take width as 320px with 25px of padding. In IE, element will be 320px wide. According to W3 standards, that is incorrect. Mozilla (Netscape) will do it according to the standards and take width as the width of the actual useful element space and add padding to it. Thus, the element will be 345px wide.

Now, all your divs have also a margin on one side of 10px. Which makes element's working space amount to 355px. Two such divs in a row take up 710px and your container is 700px wide. In IE they are only 330px wide (320px width + 10px margin) and together take up 660px. That is why they float in IE and not in Mozilla.

As aside, you have display: inline in your div declaration. You can remove this as it is superflous -- according to W3, when you float an element left or right, its display is automatically set to block and any individual display property is ignored.