title: How do I format form elements effectively without using a table?
body: <p>I have been trying for several hours to format my form neatly without the use of a table.</p>
  
  <p>I've floated the labels left and the inputs right but they still don't line up neatly with each other. Ideally it would look like so:</p>
  
  <p>Label(Root Diameter) | Input(text) | label(mm)</p>
  
  <p>I know I can do it using a table but I am looking for a more elegant and professional way of doing it. If someone could just point me in the right direction and perhaps give me an example I would appreciate it greatly.</p>
  
  <p>Here is my code.</p>
  
  <p>html:</p>
  
  <pre><code>&lt;head&gt;
  
      &lt;script src="jquery-1.11.0.min.js"&gt;&lt;/script&gt;
      &lt;script src="criticalSpeedCalc.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="calcstyle.css"&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id="calcWrapper"&gt;
          &lt;form name="calculator" id="calculator"&gt;
              &lt;label class="type"&gt;Unit of Measurement:&lt;/label&gt;
              &lt;br&gt;
              &lt;select name="unit" class="input"&gt;
                  &lt;option value="120904000"&gt;Metric (cm)&lt;/option&gt;
                  &lt;option value="4760000"&gt;Imperial (inches)&lt;/option&gt;
              &lt;/select&gt;
              &lt;br&gt;
              &lt;label class="type"&gt;Root Diameter:&lt;/label&gt;
              &lt;br&gt;
              &lt;input type="text" name="root" class="input" autocomplete="off"&gt;
              &lt;label for="unit"&gt;mm&lt;/label&gt;
              &lt;br&gt;
              &lt;label class="type"&gt;Width between bearings:&lt;/label&gt;
              &lt;br&gt;
              &lt;input type="text" name="bearings" class="input" autocomplete="off"&gt;
              &lt;label for="unit"&gt;mm&lt;/label&gt;
              &lt;br&gt;
              &lt;label class="type"&gt;End Fixity:&lt;/label&gt;
              &lt;br&gt;
              &lt;select name="fixity" class="input"&gt;
                  &lt;option value=".36"&gt;1&lt;/option&gt;
                  &lt;option value="1.0"&gt;2&lt;/option&gt;
                  &lt;option value="1.47"&gt;3&lt;/option&gt;
                  &lt;option value="2.23"&gt;4&lt;/option&gt;
              &lt;/select&gt;
              &lt;br&gt;
              &lt;label class="type"&gt;Max Speed:&lt;/label&gt;
              &lt;br&gt;
              &lt;input type="text" name="speed" class="input" autocomplete="off"&gt;
              &lt;label for="rpm"&gt;rpm&lt;/label&gt;
              &lt;br&gt;
              &lt;br&gt;    &lt;a href="#" id="reset" class="input" onclick=""&gt;Reset&lt;/a&gt;
  &lt;a href="#" id="calculate" class="input" onclick="Calculate(); return(false);"&gt;Calculate&lt;/a&gt;
  &lt;a href="#" id="close" class="input" onclick=""&gt;Exit&lt;/a&gt;
  
          &lt;/form&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  
  
  
  #calcWrapper {
  
      background-image: url("Design1.png");
  
      width: 265px;
  
      height: 365px;
  
      float: left;
  
      /*border-width: 2px;
  border-style: solid;*/
  
  }
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>#calculator {
  
      width: 186px;
  
      height: 230px;
  
      margin-left: 38px;
  
      margin-top: 115px;
  
      padding-left: 5px;
  
      font: bold 11px Helvetica, Arial, sans-serif;
  
      text-align: center;
  
      -moz-box-sizing:content;
  
      /*border-width: 2px;
  border-style: solid;*/
  
  }
  
  
  
  .input {
  
      margin: 1px;
  
      max-width: 80px;
  
      max-height: 10px;
  
      font: bold 10px Helvetica, Arial, sans-serif;
  
      display: block;
  
      vertical-align:middle;
  
      margin-bottom: 10px;
  
      float: right;
  
  }
  
  select.input {
  
      max-height: 18px;
  
  }
  
  label.type {
  
      width: 80px;
  
      display: block;
  
      vertical-align:middle;
  
      float:left;
  
      clear:left;
  
      margin: 2px;
  
  }
  </code></pre>
  
  <p>And here is a fiddle <a href="http://jsfiddle.net/3Ej7Q/" rel="nofollow">link</a></p>