Databases
StackOverflow2013
Postsdbo
POThe width of div with absolute position depends on its parent's width?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POThe width of div with absolute position depends on its parent's width?
    text
    copied!<p>I'd like to have the width of a div with absolute position depending on its content rather than its parent. For example,</p> <pre><code>&lt;div style="position:absolute"&gt; &lt;div style="position:absolute"&gt; &lt;div style="position:absolute"&gt;Div in Div&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>will cause word wrap as shown in <a href="http://jsfiddle.net/ymgfN/2/" rel="noreferrer">http://jsfiddle.net/ymgfN/2/</a></p> <p>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): <a href="http://jsfiddle.net/ymgfN/3/" rel="noreferrer">http://jsfiddle.net/ymgfN/3/</a></p> <p>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?</p> <hr> <p>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.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload