3 column form with 3rd column spanning vertically - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:3 Column

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

Description

3 column form with 3rd column spanning vertically

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <style type="text/css">
.newspaperCol<!--  www  .ja  v a2s.c  o  m-->
{
   float: left;
   width: 33%;
}
.display-label
{
   margin: 1em 0 0 0;
   display: block;
}
.display-field
{
   margin: 0.5em 0 0 0;
   display: block;
}

      </style> 
   </head> 
   <body> 
      <div class="newspaperCol"> 
         <label class="display-label">Field 1:</label> 
         <input class="display-field" type="text" id="text1" src="#" poster="#"> 
         <br> 
         <label class="display-label">Field 3:</label> 
         <input class="display-field" type="text" id="text3" src="#" poster="#"> 
         <br> 
         <label class="display-label">Field 5:</label> 
         <input class="display-field" type="text" id="text5" src="#" poster="#"> 
         <br> 
         <label class="display-label">Field 7:</label> 
         <input class="display-field" type="text" id="text7" src="#" poster="#"> 
      </div> 
      <div class="newspaperCol"> 
         <label class="display-label">Field 2:</label> 
         <input class="display-field" type="text" id="text2" src="#" poster="#"> 
         <br> 
         <label class="display-label">Field 4:</label> 
         <input class="display-field" type="text" id="text4" src="#" poster="#"> 
         <br> 
         <label class="display-label">Field 6:</label> 
         <input class="display-field" type="text" id="text6" src="#" poster="#"> 
         <br> 
         <label class="display-label">Field 8:</label> 
         <input class="display-field" type="text" id="text8" src="#" poster="#"> 
      </div> 
      <div class="newspaperCol"> 
         <label class="display-label">Notes:</label> 
         <textarea rows="17" cols="30" id="notestext"></textarea> 
      </div>  
   </body>
</html>

Related Tutorials