0

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...

user1502679
  • 566
  • 2
  • 5
  • 9

2 Answers2

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/ .

Community
  • 1
  • 1
João Paulo Macedo
  • 15,297
  • 4
  • 31
  • 41
  • ;) Thanks. No problem. I've updated my answer to suggest a possible fix. – João Paulo Macedo Aug 02 '12 at 17:15
  • This is almost literally [an example from the CSS spec](http://www.w3.org/TR/css3-box/#collapsing-margins) (example XI), and these margins according to that example **should not** collapse! *"The bottom margin of an in-flow block-level element with a ‘height’ of ‘auto’ and ‘min-height’ less than the element's used height and ‘max-height’ greater than the element's used height is adjoining to its last in-flow block-level child's bottom margin if the element has no bottom padding or border"* - but here min-height is *greater* than the used height. – Eamon Nerbonne Jun 18 '13 at 10:00
  • I think the spec is pretty poorly written on this point, but clearly the "natural" interpretation for these margins would be that they should not collapse since they're not adjacent - so if some interpretation makes chrome's behavior valid, the spec should be clarified - that behavior is really surprising. – Eamon Nerbonne Jun 18 '13 at 10:05
0

Remove the margin-bottom: 10px; from .c3 - this is what causes such behavior. As far as I know such issue is often referred to as 'collapsible margins', please, somebody correct me if I'm wrong.

skip405
  • 6,119
  • 2
  • 25
  • 28
  • Thanks for your comment, is this the only solution to this problem? Or there are other CSS hacks to resolve this..? – user1502679 Aug 02 '12 at 17:08
  • Have a look at this fiddle - http://jsfiddle.net/skip405/3FepW/4/ . I deleted the beginning of your styles (basically removing the `float` property does the trick) – skip405 Aug 02 '12 at 17:14