The width of div with absolute position depends on

Question

I'd like to have the width of a div with absolute position depending on its content rather than its parent. For example,

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

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

It looks like the inner div's width will depend on its parent's width, even though its position is absolute. For example, if we specify width to its parent, it will work as expected (no word wrap): http://jsfiddle.net/ymgfN/3/

Unfortunately, I can't specify the parent's width in advance -- eventually i will have its width to depend on its children. And, I have to use absolute position. Is it possible in pure CSS?

---

Some background: I am not trying to make a page to fulfill some design -- I know it is crazy to have three stacked absolute position for any reasonable demand. Rather, I am doing some experiment to see if the absolute positioning can be a general approach to solve a range of layout problems (versatile complicated layout that usually requires the clever use of static/absolute/float). Unfortunately, I ran into this issue which will make the idea of using the absolute position everywhere stupid.

Answer 1

The element gets its width and height before it gets removed from the flow of the document. When you position the outside element absolutely, it gets removed from the flow and since it has no immediate content, it has a width of 0 and height of 0. Therefore, another division element inside it attempting to add text inherits the parent's width of 0. So it's only going to expand to the width of the longest word to allow for content, and then break everything else to new lines. After it's done that, it removes the element from the flow of the document to be off on its own.

So, to answer your first question, yes, an absolutely positioned element does pay attention to its parent element's dimensions if you don't specify a width and/or height on the element itself. Do you know what the width of your children is supposed to be?

As for your second question... you can use white-space: nowrap. Not really a great solution. More preferably, find a better way to organize your content so you don't need three absolutely positioned elements nested inside each other. You say you have to use them... Really? It's more likely that you just haven't found a better way to do it, but that's for another question if you so choose to go down that road.

Answer 2

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

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

Then its width will be bound to the width of the parent minus the negative margin, so in practice will only depend on its content.

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