Fill remaining width of parent div - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Width

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Width

Description

Fill remaining width of parent div

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>
.alert {<!--from   ww  w .j a  v  a 2  s  .  c om-->
   position:absolute;
   background:red;
   padding:21px;
   min-height:71px;
   min-width:401px;
}

.alert-forgotPassword {
   margin-top:11px;
   width:100%;
   background:green;
}

.alert-forgotPassword-input-wrapper {
   overflow:auto;
   padding-top:2px;
}

.alert-forgotPassword-input {
   width:100%;
   box-sizing:border-box;
}

.alert-forgotPassword-button-wrapper {
   float:right;
   padding-left:11px;
}
</style> 
 </head> 
 <body translate="no"> 
  <div class="alert"> 
   <div class="alert-forgotPassword"> 
    <div class="alert-forgotPassword-button-wrapper"> 
     <button>Reset Password</button> 
    </div> 
    <div class="alert-forgotPassword-input-wrapper"> 
     <input class="alert-forgotPassword-input" type="text" placeholder="your.email@company.com"> 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials