Two Column Form with label and input field - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:2 Column

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

Description

Two Column Form with label and input field

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

form {<!--from  ww w.j a  v  a2  s. c  om-->
   width: 600px;
   background-color: #eee;
   overflow: hidden;
}

.col1 {
   display: block;
   float: left;
   line-height: 30px;
   width: 301px;
   height: 30px;
   background-color: #f00;
   border: 0;
}

.col2 {
   position: relative;
   top: -30px;
   display: block;
   float: right;
   line-height: 30px;
   width: 299px;
   height: 30px;
   background-color: #ff0;
   border: 0;
}

      </style> 
 </head> 
 <body> 
  <form> 
   <label for="i1" class="col1">Label 1</label> 
   <input id="i1" class="col1" type="text" value="Input 1"> 
   <label for="i2" class="col2">Label 2</label> 
   <input id="i2" class="col2" type="text" value="Input 2"> 
   <label for="i3" class="col1">Label 3</label> 
   <input id="i3" class="col1" type="text" value="Input 3"> 
   <label for="i4" class="col2">Label 4</label> 
   <input id="i4" class="col2" type="text" value="Input 4"> 
   <label for="i5" class="col1">Label 5</label> 
   <input id="i5" class="col1" type="text" value="Input 5"> 
   <label for="i6" class="col2">Label 6</label> 
   <input id="i6" class="col2" type="text" value="Input 6"> 
  </form>  
 </body>
</html>

Related Tutorials