This is a problem that I have to deal with everyday at my job. We have some templates "ready" to display a 3 columns fluid layout and they were perfect until Google Chrome arrived, which displays the layout in a different way.
The idea is easy, we have two divs, one floating to the right and the other one, called container, makes the fluid part of the page. We don't want the elements of the fluid div to wrap the right column, so the container has a right margin with the same or higher width than the right column. Inside the container, we use the same tactics to get a left column.
Chrome-Firefox differences
And last but not least, the right column.
Hi, I'm the left column
I am the main content. Nice to meet you.
Try the demo by yourself
This way we have a fluid design that works ok except for one issue, the container will have the main div height even if the left column is taller than the main one. The fix for that issue is easy, we can add 'overflow:auto' or 'overflow:hidden' to the container, so it will realize it has a floating div inside and 'recalculate' its height. That is called create a new block formatting context, and it is very nice explained in the colinarts article The magic of overflow hidden.
On every browser it works as we would like, but on Chrome, adding the overflow:auto makes the container realize that have a floating div at its right too, and leave the right margin to the right column instead to the window border.
All browsers but Chrome
Overflow hidden by Chrome
I could not find info about this case in the CSS docs, but I think that the new block formatting context should have effect only inside the 'overflow:hidden' div, not outside, so from my point of view, Chrome is doing it wrong. ¿What do you think?
Tested on: FF4, FF 3.6.16, Chrome 11.0.696.43, IE7, IE8, Opera 11.01