CODEWITHSUNDEEP
csshtmlpositioncontainers
Dot Oyes
Dot Oyes

Reputation: 163

Toggle div container overlapping another container under it

I have 3 divs on a form page of my website. The top left toggle overlaps the bottom div whenever i click the toggle button.

What I'm trying to do is that the bottom left div container should move down when the top div container is clicked and move back to it's former position when toggle is closed.

I have included the css for the right div, I dont know if that is the css afecting the positions of the two div 's beside it.

Before Toggle

enter image description here

After Toggle

enter image description here

CSS for Toggle

#toggle-view {
list-style:none;    
font-family:arial;
font-size:10px;
margin:0;
padding:0;
width:200px; 
position: absolute;
}

#toggle-view li {
    list-style:none;
    text-decoration:none;
    font-size:13px;
    font-family:'lato';
    padding:2px;
    margin:10px;
    margin-left:20px;
    position:relative;
    cursor:pointer; 
    border-radius: 5px;    
}

 #toggle-view li a:hover {
    color: brown;  
}

#toggle-view h3 {
    margin:0;
    font-size:13px;
    color:#2a5a9a;
}

#toggle-view span {
    position:absolute;
    right:5px; top:0;
    color:#2a5a9a;
    font-size:20px;
    font-weight: bolder;
}

#toggle-view p {
    margin:5px 0;
    display:none;
}

#toggle-view a{
    padding:5px 0;
    color:#35371c; 
}

#toggle-view a:hover{

     color:#2a5a9a;
}

CSS for LeftBox

.report{
position: absolute;
margin-top:100px;
margin-left:0;
padding-left: 20px;
}

CSS for Right Box

.register-body {
height:auto;
font-size:1em;
width:710px;
position:relative;
color:#000;
border-radius:5px;
background-color:#d2d4bb;
line-height:20px;         
margin:20px 0 20px 250px;
padding:15px 15px 0; 
}

UPDATE

When I changed 

#toggle-view {
position: absolute;
}

to 

#toggle-view {
position: relative;
}

and

.report{
 position: absolute;
}

to

.report{
 position: relative;
 }

I got this :

enter image description here

The Right Box is pushed below the bottom left box.

Upvotes: 2

Views: 1658

Answers (1)

FluffyJack
FluffyJack

Reputation: 1732

It's because you're using position absolute. Try doing the layout without absolute positioning and then it will move and flex and bend to your almighty will! :)

Upvotes: 4

Related Questions