Overflow hidden: Chrome against the rest of browsers

April 15, 2011 4:51 pm 3 comments

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.

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

javi

Let’s push your website a bit further

My name is Javier Márquez and I have more than 10 years of web programming and web designing experience. If you have a difficult development to complete, maybe you can stop by and see what I can do for you. You can find me on and Twitter.

3 Comments - Leave yours

  • pablo

    I have the same problem. Chrome and Safari are doing it wrong. Haven’t found a solution so far.

    • javimarque

      I reported the issue to the chrome team but new versions are coming out without fix it.

  • Anonymous

    Yeah I get the same problem. IE7 even gets it right, which makes me cry.

Leave a reply


contact meAnything related to web development like javascript and CSS to create responsive designs, or PHP and node.js to make your website work properly, is my pleasure. If you have an interesting project in mind, I can help to make it real.