How to add elements into one div until it's width almost equal to another div?
<p>I have 2 containers, one inside the other, and I'm trying to fill the inner container with elements on document.ready so it's width is almost equal to the outer's div width.</p>

<p>It works perfectly with "if" statement on window.resize, but since I need to fill the div on document.ready I'm trying to use "while" and it doesn't work. Why?</p>

<p>Here is the HTML:</p>

<pre><code>&lt;style&gt;
    #outer {float: left; width: 500px; background: grey}
    #inner {float: left; width: auto;}
    li {float: left; margin: 0 10px}
&lt;/style&gt;


&lt;div id="outer"&gt;
    &lt;ul id="inner"&gt;
        &lt;li&gt;&lt;/li&gt;
        &lt;li&gt;&lt;/li&gt;
        &lt;li&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p>​</p>

<p>...and JS:</p>

<pre><code>function width_check() {
    var ddd = $("#outer").width() - $("#inner").width();
    var sss = 0;

    if (ddd &gt; 100) {
        sss = 1;
    } else { sss = 0 };}​


$(document).ready function() {
    width_check();

    while (sss = 1) {
        $("#inner").append('&lt;li&gt;&lt;/li&gt;');
        width_check();
                    }        }
</code></pre>
