Position an element from its normal left to the most right place - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Position

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

Description

Position an element from its normal left to the most right place

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
div {<!--   w  ww  .j a  va  2s .c  o m-->
   width:201px;
   background-color:Chartreuse;
   margin:2em;
}

label {
   display:block;
   overflow:hidden;
}

label:first-child {
   float:left;
   width:51px;
}

input {
   display:block;
   width:100%;
   box-sizing:border-box;
}

.big {
   width:401px;
}
</style> 
 </head> 
 <body> 
  <div> 
   <label> <input> </label> 
   <label> <input> </label> 
  </div> 
  <div class="big"> 
   <label> <input> </label> 
   <label> <input> </label> 
  </div>  
 </body>
</html>

Related Tutorials