Width of div with absolute position depends on its parent width?

Question

I would like to have a div width with an absolute position depending on its contents, and not on its parent. For instance,

<div style="position:absolute"> <div style="position:absolute"> <div style="position:absolute">Div in Div</div> </div> </div> 

will wrap words as shown in http://jsfiddle.net/ymgfN/2/

It seems that the inner width of the div will depend on its parent width, although its position is absolute. For example, if we specify the width on the parent, it will work as expected (without word wrap): http://jsfiddle.net/ymgfN/3/

Unfortunately, I cannot specify the width of the parent element in advance - in the end, I will have my width to depend on its children. And I have to use an absolute position. Is this possible in pure CSS?

---

Some prerequisites: I’m not trying to make a page to carry out some kind of design - I know that madness consists of three stacked absolute positions for any reasonable demand. Rather, I am doing some experiment to determine whether absolute positioning can be a general approach to solving a number of layout problems (a universal complex layout that usually requires the smart use of static / absolute / float). Unfortunately, I ran into this problem, which will make the idea of ​​using an absolute position everywhere stupid.

Answer 1

An element gets its width and height before being removed from the document stream. When you completely position the outer element, it is removed from the stream and, since it has no immediate content, it has a width of 0 and a height of 0. Therefore, another separation element inside it, trying to add text, inherits the parent width of 0, so it will expand to the width the longest word to allow content, and then break everything else into new lines. After that, it removes the item from the document stream, which disconnects by itself.

So, to answer your first question, yes , an absolutely positioned element pays attention to the dimensions of its parent element, unless you specify the width and / or height of the element itself. Do you know what should be the width of your children?

As for your second question ... you can use white-space: nowrap . Not a good solution. It is more preferable to find the best way to organize your content so that you do not need three absolutely positioned elements nested in each other. You say you need to use them ... Really? Most likely, you simply did not find a better way to do this, but this is for another question, if you decide to go this way.

Answer 2

A block level element with position: absolute or fixed automatically bound to its parent width if a fixed width not set. If you don't want a fixed width for the child, you can effectively get around this by giving it a very high margin-right , for example.

 .inner-div { position: absolute; margin-right: -10000px; } 

Then its width will be tied to the width of the parent minus of the negative field, so in practice only its contents will depend.

Updated script: http://jsfiddle.net/ymgfN/53/