The width of div with absolute position depends on its parent's width?

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.

Isauraisbel

If you specify the width to it's child element then parent will adjust to the child element width. I 'm not sure this is what you are looking for!.... – Unbound

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.

Yellowstone

Yes, white-space prevents word wrapping, but is it possible to wrap only if the screen (i.e., the body) can't hold it? That is, to have the effect as if parent's width being set to 100% (though we don't really set it; rather, set a CSS property to the child)? – Isauraisbel

@tomyeh: The only way I can think of at the moment is setting left: 0; right: 0 on the elements and then removing the right property whenever you set the width on it. – Yellowstone

+1. Was looking for explanation (relating to this thread) on the width of children of absolutely positioned elements and found none. Took a long time before I stumbled on this. Wonder why it doesn't come up higher in the search. Should the answer have to be accepted for that? – Whiff

Very valuable explanation! "..expand to the width of the longest word to allow for content..." explained how a paragraph rendered in absolute div had all word broken in each line. Thanks! – Autosuggestion

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/

Maritamaritain