resizeable textarea
<p>I've got such definition of textareaBox and textarea in CSS file:</p>

<pre><code>.textareaBox {
   border: 1px solid #e5e5e5;
   width: 371px;
   height: 73px;
   float: right;
   padding: 5px 10px;
}
.textareaBox textarea {
   width: 370px;
   height: 67px;
   line-height: 18px;
   outline: none;
   border: none;
   font-size: 12px;
   color: #888888;
   font-family: "Segoe UI Light", segoeuil;
</code></pre>

<p>}</p>

<p>On ASPX page I've placed</p>

<pre><code>&lt;asp:Content ID=....&gt;
&lt;link type="text/css" href="~/stylesheets/jquery-ui-1.9.0.custom.css" rel="Stylesheet"/&gt;
&lt;script type="text/javascript" src="~/Scripts/jquery-ui-1.9.0.custom.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="~/Scripts/jquery-ui-1.9.0.custom.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
    $(function () {
        $(".textareaBox").resizable();
    });
&lt;/script&gt;
</code></pre>

<p>But textareaBox doesn't change its size. And textarea inside it always when it becomes bigger than textareaBox outside of the textareaBox.</p>

<pre><code>&lt;div class="textareaBox"&gt;
 &lt;textarea ... rows="10" cols="10" class="textarea jq_black"&gt;&lt;/textarea&gt;
&lt;/div&gt;
</code></pre>

<p>Where is the problem?</p>
