jQuery width getting wrong value
<p>I have a problem with the jquery method .width(). I have 4 different textarea that need to resize according to the size of a div that contains them, so I call the method .width() to get the actual width of the div (wich anyway is 100% of the window) but this method always get the wrong value even after wrapping everything in a $(window).ready().</p>

<p>Here is the CSS</p>

<pre><code>#contCode{
    width: 100%;
    height: 500px;
    margin-top: 50px;
    float: left;
    padding: 0;
}
.codeArea{
    float: left;
    font-family: "Lucida Console", Monaco, monospace;
    height:100%;
    padding: 5px 0 0 5px;
    margin: 0;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    resize: none;
}
</code></pre>

<p>This is the HTML</p>

<pre><code>&lt;div id="contCode"&gt;
    &lt;textarea class="codeArea" placeholder="Put your code here"&gt;&lt;/textarea&gt;
    &lt;textarea class="codeArea" placeholder="Put your code here"&gt;&lt;/textarea&gt;
    &lt;textarea class="codeArea" placeholder="Put your code here"&gt;&lt;/textarea&gt;
    &lt;div class="codeArea"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>And this is the script</p>

<pre><code>$(window).ready(function (){
        var wi = $("#contCode").width(); 
        var wiTex;
        wiTex = (wi) / 4;
        $(".codeArea").width(wiTex);
    });
</code></pre>

<p>I have already tried with outerWidth and innerWith and got the same result.</p>