CSS Divs overlapping each other

Question

Hi all this is my css for div

 <style type="text/css">
    #container
    {
        width: 100%;
        padding-right: 200px;
    }

    #autowidth
    {
        width: 80%;
        float: right;
        z-index: 1;
        position: relative;
    }

    #fixed
    {
        width: 20%;
        position: fixed;
        z-index: 1;
        float: left;
        margin-right: -200px;
    }
</style>

and this is my design

 <div id="container">
 <div id="fixed">
 <table>
     // my controls
 </table>
 </div>
 <div id="autowidth">
 <table>
     // my controls
 </table>
 </div>
 </div>

But when I select some long text the 2 div's are overlapping enter image description here

You can see the `GroupBox` that is my first div and the images are in second giv — Developer, Dec 26 '13 at 12:54

score 1 · Answer 1 · edited Dec 26 '13 at 13:11

1

Remove: margin-right: -200px;

or set margin-right :0.

edited Dec 26 '13 at 13:11

NoobEditor

15,563
19
81
112

answered Dec 26 '13 at 12:54

KumarA

1,368
3
18
41

vitaliy zadorozhnyy · Answer 2 · 2013-12-26T14:00:58.250

just modified a bit your css remove position:fixed, and added display:table-cell/table where required hope it will help:

   #container {
       width: 100%;
       padding-right: 200px;
       display:table;
   }
   #autowidth {
       width: 80%;
       display:table-cell;
       z-index: 1;
       position: relative;

   }
   #fixed {
       width: 20%;
       z-index: 1;
       display:table-cell;
       margin-right: -200px;

   }

another solution could be to remove position:fixed and add box-sizing:border-box to left and right divs

#container {
    width: 100%;
    padding-right: 200px;
}
#autowidth {
    width: 80%;
    float: right;
    z-index: 1;
    position: relative;
    box-sizing:border-box;

}
#fixed {
    width: 20%;
    z-index: 1;
    float: left;
    margin-right: -200px;

    box-sizing:border-box;
}

try a look to edited post, also I have made simple demo:http://jsfiddle.net/xFs83/ — vitaliy zadorozhnyy, Dec 26 '13 at 14:01
Hi you can see if the table text is more it is overlapping http://jsfiddle.net/xFs83/2/ — Developer, Dec 26 '13 at 14:07

score 0 · Answer 3 · answered Dec 26 '13 at 12:59

0

I think this can solve problem:

1.Try to set the width for the div which is being overlapped. (or) 2.Try Inline css.

I can help better if you share a screenshot.

answered Dec 26 '13 at 12:59

Sri

15
3

CSS Divs overlapping each other

3 Answers3

Linked