Question

Some strange is happening in applying the styling of css code in some browsers…

Please take a look in the example…
http://jsfiddle.net/3FepW/3/

In Chrome the green div is bigger, than in Firefox, I really don’t know what is the problem, I think in Firefox it displays as it should but in Chrome and IE9 it displays different.
I tried a lot of changes, can’t resolve this for days.., I can use height: 100% or overflow hidden but I can’t use one of them because: overflow hidden hide everything inside, but I have some draggable/sortable elements and height: 100% because I have a resizable function that will enlarge the yellow div…

Answer 1

The problem comes from something known as margin collapsing. Chrome and IE are rendering it correctly. Not sure what Firefox is doing.

There are many questions in here regarding the same problem. I’ve answered one of them here – Adding CSS border changes positioning in HTML5 webpage

Basically top and bottom margins between siblings, and children and parents collapse to highest of them. The float: left you put on .c1 prevents that from happening . The margin-bottom on .c3 gets stuck inside .c1 and that’s why it gets bigger (that is, ‘that’s why .c1 gets bigger’).

Try adding overflow: auto; to .c2– another way of preventing margins from collapsing – so c1‘s margin gets ‘stuck in’ .c2 instead – I’m assuming that’s probably what you’re looking for.

Here’s a fiddle -> http://jsfiddle.net/joplomacedo/3FepW/5/ .