Behavior of Absolutely Positioned Child Div with Inline-Block Parent Div

Question

I've noticed some weird behavior on Chrome/FF/IE, and was wondering if anybody knew why HTML/CSS gets rendered in this way.

If you have an absolutely positioned child div, whose parent's display is set to inline-block, any white space in the child div is treated as a line break. This is true even if the child element is set to contenteditable="true" (when you try to type spaces, it causes a line break).

Here is a fiddle of the phenomenon: http://jsfiddle.net/cnPAG/1/

HTML:

<div id="container">
    <div id="content">Hello, World!</div>
</div>

CSS:

#container {
    display: inline-block;
    position: relative;
}
#content {
    position: absolute;
}

If you either remove the fact that it is absolutely positioned, or the fact that the parent element is inline-block, the problem is fixed.

Answer 1

When you give absolute positioning to the child div (#content), you're removing it from the flow of the document, and therefore the parent div (#container) collapses, as it behaves as if it no longer contains anything, essentially having zero width or height. This causes the absolutely positioned child div (#content) to collapse. You can see a similar result if you remove your rules and give the parent a width:0 rule.

#container {
    width:0px;
}

jsFiddle example