Chrome messes up the website layout, FF and IE is good

Question

I am working on a website: http://www.bbp.nl/luuk-test/wac It displays really well on FF and IE. I went to test it in Chrome and it is totally messed up. Somehow Chrome displays all the divs underneath each other. I really don't know where to look since it also validates well in the W3C validator.

Also googled it, but could not find anything. Does anyone know the answer? Please help.

Answer 1

You are using -moz-box-sizing in line 20 of your style sheet for your divs to change the calculated size of your boxes for mozilla browsers. This isn't recognized in chrome.

See: https://developer.mozilla.org/en/CSS/-moz-box-sizing

You can apply the fix for browsers using webkit, too:

div {
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box; 
}

In my opinion a better approach would be to make your website look fine without this workaround and calculate your box-size based on its desired size minus its paddings.