when i click one div the other moves

i have some code here when one div is clicked the other moves

<div id="main">
<div row>
<div col-lg-6>
<div id="login">
</div>
<div id="sign-up">
</div>
</div>
<div id=text-image">
</div>
</div>
</div>

First Div CSS

 #auth-card{
                /* box-shadow: 3px 4px 5px #fff; */
                padding-right:30px;
                margin-left: 10px;
                height: 100%;
                background-color:white;
                margin: 0 auto;
                padding-top: 200px;



             }  

second div with image

#welcome-text img{
              height:132%;
              width: 130%;   
            }

when i switch to register the image moves i want it to stay fixed when login or register is clicked

Below is how the inteface looks like enter image description here

4 answers

  • answered 2019-09-22 03:37 Mr Sanders

    I had a similar problem once and what I did was to put them in separate div tags and float each div separately such that each div had its own section on the page. you can add the following to your css

    #div1{
    float:left;
    width:50%;
    box-sizing:border-box;
    }
    
    #div2{
    float:left;
    width:50%;
    box-sizing:border-box;
    }

  • answered 2019-09-22 04:45 seunmi

    You can set your background to fixed

  • answered 2019-09-22 06:02 A. Stanley

    You can also set its width to 100% this will enable the image take the full width of it container

  • answered 2019-09-22 06:47 Helen_CEE

    You can use grid system, put everything in one parent div, then use two divs that will serve as containers for the separate items, the image should have its own div then you set display: grid; for the parent container, and grid-template-columns: 1fr 1fr; That should do it