Switching my element to “position: absolute” prevents it form taking up full width

Question

My login page looks and acts how I want it to when my container div is set to display: block and position: static . However, when it becomes either display: inline-block or position: absolute , it stops taking up its max width of 500px. I want to use absolute positioning to center my div vertically and horizontally, so I need the layout to stay the same as it looks when it has static position. How can I achieve this?

 * { -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; line-height: 56px; } #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> 

Answer 1

Add width: 100%; to #login-box to get it to take up the max-width rule.

Use position: absolute; with top , left and transform with the translate function to horizontally and vertically center the login box.

#login-box {
    width: 100%;
    max-width: 500px;
    min-width: 300px;
    box-shadow: #bbb 0 0 20px 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate( -50%, -50% );
}

 * { -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 { width: 100%; max-width: 500px; min-width: 300px; box-shadow: #bbb 0 0 20px 0; position: absolute; top: 50%; left: 50%; transform: translate( -50%, -50% ); } #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; line-height: 56px; } #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> 

Answer 2

Be careful when using width: 100% on elements removed from the normal flow of the document.

Using right: 0 instead of width: 100% could be prefered for consistency, it depends on which results you are expecting when using margins in these elements.

Using width: 100% .

 div { height: 20vh; border: .2em solid violet; box-sizing: border-box; } .relative { position: relative; } .absolute { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-color: dodgerblue; margin: .5em; } 

 <div class="relative"> <div class="absolute"></div> </div> 

Using right: 0 .

 div { height: 20vh; border: .2em solid violet; box-sizing: border-box; } .relative { position: relative; } .absolute { position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-color: dodgerblue; margin: .5em; } 

 <div class="relative"> <div class="absolute"></div> </div>