Overflow hidden: Chrome against the rest of browsers

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 interpretation by Firefox

Overflow hidden by Chrome

Overflow hidden interpretation by ChromeI 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

© arqex 2023
we'll find ourselves
far, far away...
Transitions here have been created using a library of mine:
React interactable.
This awesome hyperspace effect thanks to this codepen from Noah Blon.
Software development can be fun!
Javier Márquez
Software developer