|
Floating divs breaks in FF, not other browsers
I sincerely hope this is the correct forum to ask for help with the below issue. After beating my head against a wall for a week and then asking for help (to no avail) elsewhere for another week, I stumbled onto this forum from another site.
I have a two column, valid html 1.0 trans layout where the main column, "guts," is floated left and a sidebar, "colRight," is floated right. In IE6, IE7, Opera, and Safari on Windows and Safari, Opera, and iCab on Mac, everything works. The two columns line up beside one another. In FireFox on Win, Mac, and Linux, and Camino on Mac, though, the guts column will not line up beside colRight; rather, it stacks beneath colRight.
I know I MUST have a mistake in my CSS SOMEwhere, but I'm damned if I can find it.
I've checked the widths again and again. They all work. In fact, there's empty, unaccounted for space between the two columns (a hedge against common browser width/margin/padding problems). The problem persists even if I change either column to 1px wide (without contents, of course).
As a troubleshooting step I tried absolute positioning of the main content area, too, but the outer div containers can't keep up with an absolute positioned variable-height container. I can force FireFox to put the main column where it belongs, but the black background then ends at the bottom of the shorter right navigation column. Worse, the absolute positioned "guts" column then overlaps and hides the footer.
The site is: <a href="http://designorati.com/">http://designorati.com/</a> Visit it in ANY other browser and it works great--the main "guts" content column floats left, the sidebar floats right. In FireFox and Camino, however, the main "guts" column stacks UNDER the sidebar.
I'm at a total loss, and I could REALLY use some help finding a way to workaround the FireFox issue.
The stylesheets are here: <a href="http://designorati.com/_temp/style.css">Main theme CSS</a> and <a href="http://designorati.com/_temp/style-firefox.css">additional FireFox-only CSS</a>.
Thank you in advance.
--Pariah Burke
|