Why are my divs overlapping when im resizing the browser?

Question

I am trying to create a simple login form and it looks fine until I resize my browser. I'm working with three <div> elements here; center , center2 and center3 . They are all wrapped up in main . bgpc is just the background picture.

As soon as I resize the browser the 3 center divs overlap each other and nothing stays in its place.

I already tried setting position to absolute or relative in the wrapper and in the three center divs but nothing seems to work.

 #bgpc { float: bottom; height: 100%; background-position: absolute; background-repeat: no-repeat; background-size: cover; z-index: -1; filter: blur(3px) brightness(50%); background-image: url("../images/background1.gif"); /*background-image: url("../images/home_alt.png");*/ /*background-image: url('../images/backTest.PNG');*/ } #center { position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); background-color: #35ada7; padding: 5px; padding-left: 50px; padding-right: 50px; padding-bottom: 10px; font-size: 180%; filter: drop-shadow(8px 8px 10px gray) opacity(75%); color: white; display: block; } #center2 { position: absolute; top: 80%; left: 50%; transform: translate(-50%, -50%); filter: drop-shadow(8px 8px 10px gray) opacity(75%); display: block; } #center3 { position: absolute; top: 62%; left: 50%; transform: translate(-50%, -50%); filter: drop-shadow(8px 8px 10px gray) opacity(75%); display: block; } #main { float: bottom; }

 <div id="main"> <div id="bgpc"></div> <div id="center"> <h1>MyCalc</h1> <b>Si</b>mple <b>Cal</b>culator </div> <div id="center3"> <center> <h1 style="color: white">Log in to use the<br> Calculator</h1> </center> </div> <div id="center2"> <form method="post" action="testAspx.aspx" class="login-form"> <div class="input-container"> <i class="fa fa-envelope"></i> <input type="email" id="userName" class="input" name="email" style="background-color: transparent; color: white" placeholder="Username" /> </div> <div class="input-container"> <i class="fa fa-lock"></i> <input type="password" id="loginPassword" class="input" name="password" style="background-color: transparent; color: white" placeholder="Password" /> <i id="show-password" class="fa fa-eye"></i> </div> <input id="submit" type="button" name="login" value="Login" onclick="Schleife(0)" class="button" /> </form> </div> </div>

Answer 1

you should nest your elements like so

  -- center
     --center-3
     --center-2

and remove the absolute positioning on center-2 and 3 letting the parent handle the positioning

If i were to simplify it after that id just inline the content and remove centre-2 and -3 and use flex box for centering.

 .center { display: flex; flex-direction: column; max-width: 300px; box-shadow: 9px 8px 10px 0px rgba(158, 155, 158, 1); padding: 5px 0 10px; flex: 1; }.column { padding: 0 16px; }.titles { background-color: #35ada7; color: white; }.main { display: flex; justify-content: center; align-content: center; }

 <div class="main"> <div class="center"> <div class="titles column"> <h1>MyCalc</h1> </div> <div class="column"> <p>Simple Calculator</p> <h1>Log in to use the<br> Calculator</h1> <form method="post" action="testAspx.aspx" class="login-form"> <div class="input-container"> <i class="fa fa-envelope"></i> <input type="email" id="userName" class="input" name="email" style="background-color: transparent;" placeholder="Username" /> </div> <div class="input-container"> <i class="fa fa-lock"></i> <input type="password" id="loginPassword" class="input" name="password" style="background-color: transparent;" placeholder="Password" /> <i id="show-password" class="fa fa-eye"></i> </div> <input id="submit" type="button" name="login" value="Login" onclick="Schleife(0)" class="button" /> </form> </div> </div> </div>