« Volunteer Technology Experts Serve Elections | Main | What is Flash? »

Adventures in CSS: Positioning Blues

I was so close, and yet...

Yes, I'm struggling with getting the site's new design to work across browsers at different window dimensions. I've got four elements in the layout: banner, content, sidebar, and footer. The last big challenge I was facing was to get content and sidebar to sit side by side, and to have them behave as they were the same length regardless real length, without overlapping other elements. First, I tried using position: absolute for the sidebar. But that led to problems of overlapping elements.

So, now I'm returning to float. To keep both content and sidebar vertically aligned at the top, I've nested them into a container div and set them to float: left and float: right. Since many pages have flash movies in them, I want the sidebar to move below the content if needed. Well, so far it's working in IE, but not mozilla or opera. Very frustrating.

On the bright side, the sidebar isn't overlapping the footer anymore :-)