CSS Floats and Absolute Positioning
Just yesterday I made what I thought was a simple change to a layout. It had a horizontal navigation at the top (an floated list) and two floating content areas below it taking up approximately half the screen each.
For some reason, when I removed a menu item from the end of the navigation, all hell broke loose in Firefox. The left-hand float moved right and the right-hand float bumped down under it. Amazingly the design still rendered as desired in Internet Explorer so I didn’t put a whole lot of detective work into it. The site would only be accessibly on our corporate network where Firefox is almost a four letter word. But it did bother me that removing that one item (which should have no effect on the floats) broke everything so badly. Alas, I still had bigger fish to fry and other problems to focus on so that was going on the back burner.
It’s funny how solutions sometimes present themselves in unlikely places just when you need them. I had cut out reading my regular blogs some time ago to focus on other things but I had a few minutes so I decided to check some out. I’m glad I did since the latest post from Shaun Inman discusses the fragile nature of floats and his solution.
I think I may have found the solution I’m looking for. Check it out, it’s definitely worth a read.
