-1

Could you please explain to me how adding display:inline-block to the parent element influences on its' children, when they are already floated?

As you can see in the jsfiddle example, containing element dosen't seems to see its' floated chidren (as far as I know, this is normal effect of floating). But when you add display:inline-block to containing element, its' border becomes visible around floated elements. Does this brings them back to the normal flow of the document? How does it effects on elements positioning?

spaceBarCombo
  • 1
  • possible duplicate of [Why do \`inline-block\` elements auto-clear their children?](http://stackoverflow.com/questions/19935045/why-do-inline-block-elements-auto-clear-their-children) – Josh Crozier Nov 12 '13 at 18:07
  • Read about Block Formatting Context: http://stackoverflow.com/questions/6196725/how-does-the-css-block-formatting-context-work – j08691 Nov 12 '13 at 18:08

2 Answers2

0

Try:

overflow:hidden; will maintain height of wrapper.

#wrap {
    overflow:hidden;
}

Fiddle here.

OR

clear floats.

.clr{clear:both;}

Fiddle here.

codingrose
  • 15,563
  • 11
  • 39
  • 58
  • 1
    `overflow: hidden;` is a bad way to clear floats, consider using `clear: both;` instead – Mr. Alien Nov 12 '13 at 18:10
  • @Mr.Alien - can you explain why using overflow hidden may be bad for those that haven't heard that argument? – j08691 Nov 12 '13 at 18:17
  • @j08691 well, sorry, had posted that comment via cell, and I often suggest that method but depends on conditions, like say if a designer is having `box-shadow` on child elements it will simply chop off http://jsfiddle.net/ut7Dp/ where `clear: both;` will be an hero ;) http://jsfiddle.net/ut7Dp/1/ – Mr. Alien Nov 13 '13 at 03:03
  • @Hiral in your example 'overflow: hidden' and 'clear: both' have the same effect on elements as my 'display: inline-block' - all those commends seems to bring the floated elements to normal flow of the document. So what is the difference? – spaceBarCombo Nov 13 '13 at 11:02
  • In first fiddle I have not cleared any floats but just written `overflow:hidden` to `wrap`. whereas, in second fiddle I have cleared floats before ending `wrap` div It is important to do so to maintain height of `wrap` – codingrose Nov 13 '13 at 11:06
0

floats are floats, blocks are blocks.

when a container has display:block (div default behavior), it will stretch its width as much as it can, and won't allow elements near it, only above or beneath.

the floating elements will float on their position. if the container is a block, they will have probably more space to stretch in.

unlike inline-block container, which takes only the width it needs, and doesn't stretch as far as it can.

hope that helped.

geevee
  • 5,411
  • 5
  • 30
  • 48