css overflow issue with two division

Question

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

score 3 · Answer 1 · answered Jan 29 '14 at 10:16

3

http://jsfiddle.net/fNhet/1/

.wrapper {
    display: inline-block;
}

answered Jan 29 '14 at 10:16

CRABOLO

8,605
39
41
68

2

No offence with the answer but this is not the solution to the question :) you are changing the display property of the parent element which is a block level, so you shouldn't alter, the issue is of **uncleared floats** – Mr. Alien Jan 29 '14 at 10:21

score 2 · Accepted Answer · edited May 23 '17 at 10:31

2

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.

edited May 23 '17 at 10:31

Community

1
1

answered Jan 29 '14 at 10:17

Mr. Alien

153,751
34
298
278

1

I love Stackoverflow :) – zey Jan 29 '14 at 10:33
@zey He he, read those answers and you will get the detailed information on the behavior :) – Mr. Alien Jan 29 '14 at 10:34
Yes , i have gave +1 for useful answer , and thank you ! – zey Jan 29 '14 at 10:35
1

@zey it's so good to see that so many ppl answered your question....... i am so happy to be a part of it..... – malcolmX Jan 29 '14 at 10:42

score 1 · Answer 3 · answered Jan 29 '14 at 10:17

1

In your css try addding to your .wrapper
CSS:-

overflow:hidden;

DEMO.This will do the trick.

answered Jan 29 '14 at 10:17

malcolmX

429
4
15

score 1 · Answer 4 · answered Jan 29 '14 at 10:17

1

use display: inline-block; overflow: hidden; width: 50% .. this will give you some additional effect

answered Jan 29 '14 at 10:17

Moorthy GK

1,283
9
17

score 1 · Answer 5 · answered Jan 29 '14 at 10:23

1

Add display:inline-block; to wrapper div then you can get the result.....

answered Jan 29 '14 at 10:23

Nagesh Reddy

9
3

css overflow issue with two division

5 Answers5