After styling my login page to perfection with the container div set to display: block and position: static, I encountered an issue when attempting to switch to display: inline-block or position: absolute. The container div stopped adhering to its maximum width of 500px, disrupting the desired layout. My goal is to center the div both vertically and horizontally using absolute positioning, while maintaining the same appearance as when it was positioned statically. How can I achieve this without compromising the layout?
* {
-moz-box-sizing: border-box !important;
-webkit-box-sizing: border-box !important;
box-sizing: border-box !important;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
#login-box {
max-width: 500px;
min-width: 300px;
box-shadow: #bbb 0 0 20px 0;
display: block;
position: static;
/*position: absolute;*/
}
#HeaderForLoginForm {
background-image: url('https://dummyimage.com/600x106/333333/fff.png&text=SOME+LOGO');
background-repeat: no-repeat;
background-size: 200px;
background-position-x: center;
background-position-y: 25px;
background-color: #000;
height: 110px;
text-align: center;
}
#headerlinks {
color: rgb(90, 90, 90);
font-weight: bold;
font-size: 12px;
margin-top: 54px;
display: inline-block;
}
@media (min-width: 450px) {
#HeaderForLoginForm {
background-position-x: 25px;
background-position-y: center;
text-align: right;
height: 95px;
line-height: 95px;
}
#headerlinks {
margin-right: 20px;
margin-top: 0;
}
}
#DivForLoginForm {
background: #b7d9ff;
background: -webkit-linear-gradient(#b7d9ff, #fff);
background: -o-linear-gradient(#b7d9ff, #fff);
background: -moz-linear-gradient(#b7d9ff, #fff);
background: linear-gradient(#b7d9ff, #fff);
text-align: center;
}
#LoginForm {
display: inline-block;
width: 74%;
margin-top: 20px;
margin-bottom: 40px;
}
#LoginForm input.textField {
display: inline-block;
width: 100%;
padding: 10px;
margin-top: 18px;
font-size: 14px;
border-radius: 3px;
border: 1px solid #999;
}
#terms-wrapper {
margin-top: 16px;
margin-bottom: 30px;
text-align: left;
font-size: 14px;
font-weight: bold;
}
#terms-wrapper input {
margin-left: 0;
vertical-align: -2px;
}
a[href] {
color: #0079dd;
text-decoration: none;
}
a[href]:hover {
text-decoration: underline;
}
input#btn-login {
padding: 14px;
height: auto;
width: 40%;
min-width: 100px;
float: right;
background-color: #1064d8;
color: #fff;
font-weight: bold;
font-size: 16px;
outline: none !important;
border: none;
border-radius: 3px;
cursor: pointer;
}
input#btn-login:hover {
background-color: #004BBF;
}
input#btn-login:active {
background-color: #0031A5;
}
#loginfooter {
background-image: url("http://images.naldzgraphics.net/2014/08/20-brushed-seamless-texture.jpg");
color: rgb(100, 100, 100);
padding: 12px;
font-size: 11px;
}
[data-val-required] {
background-color: #fff;
}<section id="login-box-wrapper">
<div id="login-box">
<header id="HeaderForLoginForm">
<div id="headerlinks">
<a href="#">some link</a> |
<a href="#">some other link</a>
</div>
</header>
<div id="DivForLoginForm">
<form method="post" id="LoginForm">
<input class="textField" id="UserName" name="UserName" placeholder="Username" type="text">
<input class="textField" id="Password" name="Password" placeholder="Password" type="password">
<div id="terms-wrapper">
<input id="HasAcceptedTermsConditions" name="HasAcceptedTermsConditions" type="checkbox">
<label for="HasAcceptedTermsConditions">
I agree to the <a id="terms-link" href="#" target="_blank">General Terms of Service</a>
</label>
</div>
<input id="btn-login" type="submit" value="LOG IN">
</form>
</div>
<footer id="loginfooter" style="text-align: center;">
<span>© 2009-2017 Some Company, LLC — All rights reserved</span>
</footer>
</div>
</section>