Behavior of an Absolutely Installed Child Div with a Linear Div Unit

Question

I noticed some weird behavior in Chrome / FF / IE and wondered if anyone knew why HTML / CSS gets rendered this way.

If you have an absolutely positioned child div whose parent screen is set to an inline block, any free space in the child div is considered a line break. This is true even if the child is set to contenteditable = "true" (when you try to enter spaces, it causes a line break).

Here is the scenario 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 eliminate the fact that it is absolutely positioned or the fact that the parent is an inline block, the problem is fixed.

Answer 1

When you give absolute positioning to a child div ( #content ), you remove it from the document stream, and so the parent div ( #container ) is compressed because it behaves as if it no longer works, contains anything essentially zero-width or height. This results in a smoothing of the absolutely positioned child div ( #content ). You can see a similar result if you delete your rules and give the parent rule width:0 .

 #container { width:0px; } 

JsFiddle example