css overflow issue with two division <p><a href="http://jsfiddle.net/fNhet/" rel="nofollow">Fiddle </a><br> I have two <code>Div</code> , one is in table and other , outside of table .<br> My problem is , as you can see , <code>divOne</code> overflow outside of parent <code>Div</code> .<br> I want to show like</p> <pre><code> --------------------- | ---- ---- | | | | | D2 | | | | D1 | | | | | | | ---- | | | | | | ---- | --------------------- </code></pre> <p>Here is my code ,</p> <p><strong>html</strong></p> <pre><code> &lt;div class="wrapper"&gt; &lt;textarea rows="12" cols="8" class="divOne"&gt; Division One &lt;/textarea&gt; &lt;table&gt; &lt;tr&gt; &lt;td&gt; &lt;textarea rows="6" cols="8" class="divOne"&gt; Division Two &lt;/textarea&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; </code></pre> <p><strong>Css</strong></p> <pre><code>.wrapper { border: 1px solid #999999; position: relative; margin: 0px; padding: 10px; width: 600px; background-color: #FCFCFC; min-height: 50px; color: black; border-radius: 8px; -moz-border-radius: 8px; line-height:normal; } .divOne { float:left; } </code></pre>