Databases
StackOverflow2013
Postsdbo
POAbsolutely positioned parent and float:right child stretches
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAbsolutely positioned parent and float:right child stretches
    text
    copied!<p>In IE6, IE7 and FF2 the <code>.outer</code> div below is stretching out to the right edge of the document. Here is a complete test case:</p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;style&gt; .outer { position:absolute; border:1px solid red; } .outer .floater { float:right; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="outer"&gt; &lt;div class="floater"&gt;Lorem ipsum&lt;/div&gt; &lt;/div&gt; &lt;/body&gt; </code></pre> <p>As I understand <code>position:absolute</code>, the outer div should be removed from the flow of the document and (without a width specified) <em>should</em> take up the minimal amount of space needed to display its contents. However <code>float:right</code> on any child breaks this.</p> <p>Expected output (IE8, FF3+, Chrome 2+, Safari 4, Opera 9+):</p> <p><img src="https://i.stack.imgur.com/bOxv9.gif" alt="Expected output - IE8, FF3+, Chrome 2+, Safari 4, Opera 9+"></p> <p>Actual output (IE6, IE7, FF2):</p> <p><img src="https://i.stack.imgur.com/EzqFH.gif" alt="Actual output - IE6, IE7, FF2"></p> <p><strong>How do I get the outer div to not stretch?</strong> This is only happening in IE6, IE7 and Firefox 2.</p> <p>Requirements:</p> <ul> <li><code>.outer</code> cannot have a <code>width</code> set (it <em>must</em> be left as <code>"auto"</code>)</li> <li><code>.outer</code> must remain absolutely positioned</li> <li><code>.floater</code> must remain floated to the right</li> </ul> <hr> <p><strong>Update</strong>:</p> <p>I've reproduced the behavior as a "real world" example using jQuery dialog. The characteristics are the same:</p> <ol> <li>There is an absolutely positioned div (i.e. the dialog container, jQuery-UI creates this)</li> <li>The div from 1) has <code>width="auto"</code></li> <li>There is an element inside this dialog that is floated to the right.</li> </ol> <p><a href="http://jsbin.com/iguxe" rel="nofollow noreferrer"><strong>See it here</strong></a>. Again, IE6, IE7 and FF2 are the only problematic browsers.</p> <p>This replicates the conditions inside my application. I tried boiling down the problem to what you see above this Update, but I'm getting the sense that people could use a real-world example where my requirements make sense. I hope I've done this.</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