title: CSS making each section of the form to be placed horizontally?
body: <p>I can't seem to find a way to make a css to separate the long form into blocks and place them horizontally on the page.  Right now it's a vertical form and I have to scroll down to see the bottom section so I was thinking if it's possible to place each section horizontally on the page.  How should I do this?</p>
  
  <p><strong>CSS Code:</strong></p>
  
  <pre><code>&lt;style type="text/css"&gt;
  html, body, h1, form, fieldset, legend, ol {
      margin: 0;
      padding: 0;
  }
  body {
      background: #FC0;
      color: #111111;
      font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
      padding: 20px;
  }
  
  /*Form Steps Counter*/
  form#newcust &gt; fieldset &gt; legend:before {
      content: "Step " counter(fieldsets) ": ";
      counter-increment: fieldsets;
  }
  /*Form*/
  form#newcust {
      background: #9cbc2c;
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      border-radius: 10px;
      padding: 20px;
      margin-left: 25%;
      margin-right:25%;
      width: 400px;
  
  }
  
  /*Fieldset*/
  form#newcust fieldset {
      border: none;
      margin-bottom: 10px;
  
  }
  form#newcust fieldset:last-of-type {
      margin-bottom: 0;
  }
  
  /*Legend*/
  form#newcust legend {
      color: #384313;
      font-size: 14px;
      font-weight: bold;
      padding-bottom: 10px;
      text-shadow: 0 1px 1px #c0d576;
  }
  
  form#newcust ol li {
      background: #b9cf6a;
      border-color: #e3ebc3;
      border-style: solid;
      border-width: 2px;
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      border-radius: 10px;
      line-height: 30px;
      list-style: none;
      padding: 5px 10px;
      margin-bottom: 2px;
  }
  form#newcust ol ol li {
      background: none;
      border: none;
      float: left;
  }
  
  form#newcust label {
      float: left;
      font-size: 12px;
      width: 150px;
  }
  form#newcust fieldset fieldset label {
      background:none no-repeat left 50%;
      line-height: 20px;
      padding: 0 0 0 30px;
      width: auto;
  }
  form#newcust fieldset fieldset label:hover {
      cursor: pointer;
  }
  
  /*Input*/
  form#newcust input:not([type=radio]),
  form#newcust textarea {
      background: #ffffff;
      border: none;
      -moz-border-radius: 3px;
      -webkit-border-radius: 3px;
      -khtml-border-radius: 3px;
      border-radius: 3px;
      font: 14px "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
      outline: none;
      padding: 3px;
      width: 200px;
  }
  form#newcust input:not([type=submit]):focus,
  form#newcust textarea:focus {
      background: #eaeaea;
  }
  form#newcust input[type=radio] {
      float: left;
      margin-right: 5px;
  }
  form#newcust button {
      background: #384313;
      border: none;
      -moz-border-radius: 12px;
      -webkit-border-radius: 12px;
      -khtml-border-radius: 12px;
      border-radius: 12px;
      color: #ffffff;
      display: block;
      font: 16px "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
      letter-spacing: 1px;
      margin: auto;
      padding: 5px 15px;
      text-shadow: 0 1px 1px #000000;
      text-transform: uppercase;
  }
  form#newcust button:hover {
      background: #1e2506;
      cursor: pointer;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p><strong>HTML Code:</strong></p>
  
  <pre><code>&lt;body&gt;
  &lt;form id=newcust method="POST" action="newcust.php" enctype="multipart/form-data"&gt;
      &lt;fieldset&gt;
          &lt;legend&gt;Date&lt;/legend&gt;
          &lt;ol&gt;&lt;li&gt;
                  &lt;label for=purchase_date&gt;Purchase Date:&lt;/label&gt;
                  &lt;input id=purchase_date name=purchase_date type=date placeholder="Debenture's Purchase Date" required autofocus&gt;&lt;br&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;label for=mature&gt;Maturity Date:&lt;/label&gt;
                  &lt;input id=mature_date name=mature_date type=date placeholder="Debenture's Maturity Date" required&gt;&lt;br&gt;&lt;/li&gt;         
          &lt;/ol&gt;
      &lt;/fieldset&gt;
  
      &lt;fieldset&gt;
          &lt;legend&gt;General Information&lt;/legend&gt;
          &lt;ol&gt;
                  &lt;li&gt;&lt;label for=sub_id&gt;Subscription No.:&lt;/label&gt;
                  &lt;input id=sub_id name=sub_id required&gt;&lt;br&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;label for=cert_id&gt;Certificate No.:&lt;/label&gt;
                  &lt;input id=cert_id name=cert_id type=text required&gt;&lt;br&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;label for=amount&gt;Principle:&lt;/label&gt;
                  &lt;input id=amount name=amount type=text required&gt;&lt;br&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;label for=unit&gt;Unit:&lt;/label&gt;
                  &lt;input id=unit name=unit type=text required&gt;&lt;br&gt;&lt;/li&gt;
          &lt;/ol&gt;
      &lt;/fieldset&gt;
      &lt;fieldset&gt;
          &lt;legend&gt;Purchaser Information&lt;/legend&gt;
          &lt;ol&gt;            
                  &lt;li&gt;&lt;label for=purchaser_first&gt;Purchaser First Name:&lt;/label&gt;
                  &lt;input id=purchaser_first name=purchaser_first type=text required&gt;&lt;br&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;label for=purchaser_last&gt;Purchaser Last Name:&lt;/label&gt;
                  &lt;input id=purchaser_last name=purchaser_last type=text required&gt;&lt;br&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;label for=purchaser_id&gt;Purchaser ID No.:&lt;/label&gt;
                  &lt;input id=purchaser_id name=purchaser_id type=text  required&gt;&lt;br&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;label for=purchaser_no&gt;Purchaser Phone No.:&lt;/label&gt;
                  &lt;input id=purchaser_no name=purchaser_no type=text required&gt;&lt;br&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;label for=purchaser_add&gt;Purchaser Address:&lt;/label&gt;
                  &lt;textarea id=purchaser_add name=purchaser_add rows=5 required&gt;&lt;/textarea&gt;
                  &lt;br&gt;&lt;/li&gt;
          &lt;/ol&gt;
      &lt;/fieldset&gt;
      &lt;fieldset&gt;
          &lt;legend&gt;Beneficiary Information&lt;/legend&gt;
          &lt;ol&gt;            
                  &lt;li&gt;&lt;label for=beneficiary_first&gt;Beneficiary First Name:&lt;/label&gt;
                  &lt;input id=beneficiary_first name=beneficiary_first type=text required&gt;&lt;br&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;label for=beneficiary_last&gt;Beneficiary Last Name:&lt;/label&gt;
                  &lt;input id=beneficiary_last name=beneficiary_last type=text required&gt;&lt;br&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;label for=beneficiary_id&gt;Beneficiary ID No.:&lt;/label&gt;
                  &lt;input id=beneficiary_id name=beneficiary_id type=text required&gt;&lt;br&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;label for=beneficiary_no&gt;Beneficiary Phone No.:&lt;/label&gt;
                  &lt;input id=beneficiary_no name=beneficiary_no type=text required&gt;&lt;br&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;label for=beneficiary_add&gt;Beneficiary Address:&lt;/label&gt;
                  &lt;textarea id=beneficiary_add name=beneficiary_add rows=5 required&gt;&lt;/textarea&gt;&lt;br&gt;&lt;/li&gt;
          &lt;/ol&gt;
      &lt;/fieldset&gt;
  
          &lt;fieldset&gt;
          &lt;legend&gt;Bank Information&lt;/legend&gt;
          &lt;ol&gt;            
                  &lt;li&gt;&lt;label for=bank_acc_name&gt;Bank Account Name:&lt;/label&gt;
                  &lt;input id=bank_acc_name name=bank_acc_name type=text required&gt;&lt;br&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;label for=bank_acc_no&gt;Bank Account No.:&lt;/label&gt;
                  &lt;input id=bank_acc_no name=bank_acc_no type=text required&gt;&lt;br&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;label for=bank_swift&gt;Bank Swift Code:&lt;/label&gt;
                  &lt;input id=bank_swift name=bank_swift type=text required&gt;&lt;br&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;label for=bank_name&gt;Bank Name:&lt;/label&gt;
                  &lt;input id=bank_name name=bank_name type=text required&gt;&lt;br&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;label for=bank_no&gt;Bank Phone No.:&lt;/label&gt;
                  &lt;input id=bank_no name=bank_no type=text required&gt;&lt;br&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;label for=bank_add&gt;Bank Address:&lt;/label&gt;
                  &lt;textarea id=bank_add name=bank_add rows=5 required&gt;&lt;/textarea&gt;&lt;br&gt;&lt;/li&gt;
          &lt;/ol&gt;
      &lt;/fieldset&gt;
      &lt;fieldset&gt;
      &lt;br&gt;
          &lt;button type=submit&gt;Submit&lt;/button&gt;
      &lt;/fieldset&gt;
  &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>