Differences between browsers (surprise), a float issue?

[Ari Heino]

The site: http://users.utu.fi/athein/tvpk/
Screenshots: http://users.utu.fi/athein/tvpk/screenshots/

The idea: header on top, then sidebar (width 16em, floated left) and
content on the right (left margin 17em to give sidebar its space).
Footer on the bottom ('clear: both' to make it go beneath everything
else). Widths, paddings, borders and margins are all measured in ems to
make the design fluid.

Note: the temporary 1px border around the sidebar is there just for
clarity. Removing it won't make a difference.

Markup is html strict and everything has been validated.

Problems and their "fixes":
- FF 3: No problems, shows the pages as intended.
- IE 7: additional empty space between the footer and the sidebar
(height 1em?). "Fix": negative top margin for footer.
- Safari 4: content div too narrow, should take all available space.
"Fix": negative right margin for content div.
- Opera 9.64: content div too narrow, should take all available space.
"Fix": 1em left margin for content div.

Can you tell me something about these problems? Are these all some kind
of float-related problems? Is there a universal fix for the design?
Have I implemented the two-column layout incorrectly?

 

[Ari Heino]

Ari Heino kirjoitti seuraavasti:

Can you tell me something about these problems?

I guess this is part of the IE7 problem:
http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/FloatedClearedBug.html

 

[Ari Heino]

Ben C kirjoitti seuraavasti:

The reason for the Opera problem (which looks like also the Safari
problem) is overflow: auto on #content.

Thanks! I began to suspect that part, too.

But why do you need overflow: auto on content?

I was a bit extreme with my testing: If the window was _very_ narrow,
the long words and images started to spill over. BTW: for some reason,
FF at least didn't show scroll bars at it should, right?
But you're right, in most cases it's not needed

As for IE, good luck!

I think some conditional css for IE will solve the problem. I wonder how
IE8 handles the IE7's documented float + clear bug?