While attempting to design a straightforward login form, everything appears to be working fine until the browser window is resized. The setup involves three <div> elements: center, center2, and center3, all enclosed within main. Additionally, there's a background image represented by bgpc.
Upon resizing the browser, the 3 center divs start overlapping each other, causing misalignment.
Various attempts have been made to address this issue by setting positions to either absolute or relative in both the wrapper and the individual center divs, yet no solution has proved effective.
#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>