Why is this CSS layout breaking randomly?

Question

I have built a CSS layout for a page that appears to work in tested browsers thus far and has previously validated CSS and HTML.

Randomly though, the layout breaks and div s move as if they lost their floats. The breaks occur in Firefox 4 and IE8 for sure so it's not browser specific. There have been at times four div s that have moved but at other times only one — so it doesn't break the same way every time. The breaks typically happen after a period of time away from the site and are fixed with either one or two refreshes. The breaks cannot be triggered with an empty cache/cleared browser history. The breaks happen whether the header is on the actual page or as an include. The breaks happen probably one time out of 20 — but it really seems like it's more about the time passed between page loads than about anything else. I am not understanding how this could purely be a cache issue since I cannot recreate the issue when I delete the cache.

Originally, another forum answer said that it was the use of @fontface but today I saw the layout break in IE8 and Firefox with the 2 @fontface fonts loaded....so it is only the layout that broke while the fonts loaded. So I am not sure if that is the issue. The layout is built to work even if the @fontface does not load.

Here is the link to the site that breaks - http://rg.isolatedfilmproductions.com . Screenshot:

Broken layout as seen inIE8 http://rg.isolatedfilmproductions.com/img/css_not_loading.png

The site is on a shared Apache server. My internet speed is 12mbps cable using Windows Vista laptop.

Answer 1

Set the widths of the two divs explicitly, navigation_menu_container and company_name_container and ensure that they're less than 100% of the parent window size. IE has issues with size plus margin and padding (and the box model in general) and it almost always rears its ugly head when floating two elements.....resulting in an element being bumped down.

This is the reason that I enjoy using 960.gs....no need to worry about box model messes on IE.

As an aside, the font is pretty choppy looking on Chrome....