Did you know that when you explicitly set a 100% table width with CSS and align it next to a float, stuff breaks? Oh it breaks, and it breaks bad.

Firefox will spread the table’s width to fill the page, completely underlapping the float and ignoring the dimensions of any parent container. IE will throw everything at the bottom of the float, leaving you with a huge whitespace above it.

I’ve spent basically a week pulling my hair out trying to resolve this simple-seeming problem, and the solution was to put a table (of display type ‘table’) with a 100% width inside of a container div with a specific margin width to account for the float. And oh yeah, you need to clear:both; right after the container div, or everything breaks in even more exciting ways.

It’s browser retardedness of the highest order, and it’s an inelegant solution, but holy hell it works and after banging my head on the wall for so long I’ll count it as a victory and move on.