Not sure this is the right category for this – as I STILL don't understand WHY. I should probably add a special category for my CSS issues and name it "Dazed and very very confused"
I wanted the background of the page one color – and I wanted the area behind a sidebar and a main content area a DIFFERENT color (same goes if you try to use images).
When I created the HTML and CSS for this – it worked fine in IE (believe it or not!) but didn't in Firefox. The color for the background would NOT go behind the inner divs.
After A LOT of playing around – I realized, while the two inner divs (the sidebar and bodytext divs) were floated left – the outer "main" div (where I had specified this DIFFERENT color) was not indicated with any kind of positioning. Simply by adding the float: left; to that "main" div – and then suddenly the background I wanted shows up.
Ok. Now, can someone explain to me WHY?!?!?!
Here's an example of what I'm talking about. The top section shows how it looked when I was pulling my hair out. The bottom shows how it looked after many hours of hair pulling. (View source to see the code – obviously)
Again – the page behaves in both cases as I would have expected, in IE. It was Firefox that was having the problem.