Create layout for input with label - HTML CSS CSS Form

HTML CSS examples for CSS Form:input

  1. HOME
  2. HTML CSS
  3. CSS Form
  4. input

Description

Create layout for input with label

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">

.left_field { float: left; width: 50%; }
.right_field { float: right; width: 50%; }
.left_field > div,
.right_field > div {
   border: 1px #DDD solid;
   width: 100%;
   overflow: visible;
}
.left_field > div,
.right_field > div {
   position: relative;
   clear: both;
}
.left_field .field_data,
.right_field .field_data {
   padding-left: 142px;
}
.field_label {<!--from w w w  .j a v a2s  . c  o  m-->
   font-weight: bold;
   color: yellow;
   width: 125px;
   padding: 5px;
}
.left_field .field_label,
.right_field .field_label {
   border-right: 1px #DDD solid;
   background-color: #F2F2F2;
   padding: 5px;
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
}
.field_data {
   width: 125px;
   padding: 5px;
   float: left;
}


      </style> 
 </head> 
 <body> 
  <div class="left_field"> 
   <div> 
    <span class="field_label">PO Number:</span> 
    <span class="field_data">12345</span> 
    <div style="clear: both;"></div> 
   </div> 
   <div> 
    <span class="field_label">ASN Number:</span> 
    <span class="field_data">67890</span> 
    <div style="clear: both;"></div> 
   </div> 
   <div> 
    <span class="field_label">Shipment Date:</span> 
    <span class="field_data">test test test test test</span> 
    <div style="clear: both;"></div> 
   </div> 
  </div> 
  <div class="right_field"> 
   <div> 
    <span class="field_label">PO Date:</span> 
    <span class="field_data">Jan 25, 2012</span> 
    <div style="clear: both;"></div> 
   </div> 
   <div> 
    <span class="field_label">ASN Date:</span> 
    <span class="field_data">lgiht light light light light</span> 
    <div style="clear: both;"></div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials