I was somewhat annoyed to discover last Saturday that on certain photo pages, extremely wide pictures would get bumped below the left-floated menu side bar in IE5/Win. Additionally, strange wrapping errors would occur with the main content DIV on text-heavy pages, owing to discrepancies in different browsers’ non-standard interpretations of CSS padding and margin declarations. Applying an extra “float: left” property to the main content DIV would fix its position in IE, but cause the whole DIV to get bumped down in Opera and Mozilla; while removing the float and relying on a “margin-left: ” property for the content DIV would give insufficient margin to the main content in IE, causing unsightly overlaps where it wrapped improperly around the menu sidebar.

The problem with large photos getting bumped down was finally fixed with a “clear: right” property added to the main content DIV. I have no idea why, but it worked.

The wrapping problem was fixed using Tantek’s box model hack, which is not only a useful tool for rendering boxes with IE-specific padding and width, but can also fool IE5/Win into obeying phantom floats, while using more compliant margin properties outside the hack for standards-compatible broswers.