Menu
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.
247
In position: relative , the element is positioned relative to itself. However, an absolutely positioned element is relative to its parent. An element with position: absolute is removed from the normal document flow. It is positioned automatically to the starting point (top-left corner) of its parent element.
Because the element, which you give absolute position take the width from his parent and didn't behave as a block element. It takes the width and height from its content.
Clearly, nothing can be absolute and relative at the same time. Either you want the element to position itself based on another ancestor's position or based on the page flow.
Method 2: We can make the display attribute of the child container to table-row and display attribute of parent container to table, that will take all the height available from the parent div element. To cover all the width, we can make the width of parent div to 100%.
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.
105
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
