css overflow problem with two divisions

advertisements

Fiddle
I have two Div , one is in table and other , outside of table .
My problem is , as you can see , divOne overflow outside of parent Div .
I want to show like

 ---------------------
|  ----    ----       |
| |    |  | D2 |      |
| | D1 |  |    |      |
| |    |   ----       |
| |    |              |
|  ----               |
 ---------------------

Here is my code ,

html

   <div class="wrapper">
    <textarea rows="12" cols="8" class="divOne">
        Division One
    </textarea>
    <table>
        <tr>
            <td>
    <textarea rows="6" cols="8" class="divOne">
     Division Two
     </textarea>
            </td>
        </tr>
    </table>
      </div>

Css

.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;
}


The issue over there is that you are using floats but you aren't clearing

.wrapper:after { /* Using a clearfix */
    display: table;
    content: "";
    clear: both;
}

Demo

So, the parent takes the height of the non floated elements... and thus the background doesn't increase.

For more information on float and clear, read my answers here and here.