<div> usage correctly? Can't get the columns to line up

This is pretty painful. I can't seem to line up my div's. I just want 3 columns with input fields/description to the left. I have tried to do this many ways and I just can't seem to get it to work.

This is the website if it helps, its a student project that a bunch of us got together and I am tasked unfortunately with programming the website.

http://www.fsaesim.com/Products.html

I'm fairly new to CSS but I have experience in HTML. The Javascript file isn't included just yet but it worked the last time I had it uploaded, disregard that part.

    <div class="body1">
        <div class="main">
        <br />
<!-- content -->
    Tire Choice:
    &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp&nbsp&nbsp&nbsp&nbsp<select id="tireChoiceSel">
        <option value="1">Michelin 13"</option>
        <option value="2">Hoosier 13" Large</option>
        <option value="3">Hoosier 13" Small</option>
        <option value="4">Mexican Tires</option>
    </select>

    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
Engine:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbs  p&nbsp&nbsp&nbsp&nbsp&nbsp<select id="engineSelectionSel">
        <option value="1">Yamaha R6 - 4 Cylinder</option>
        <option value="2">Yamaha WR450 - 1 Cylinder</option>
        <option value="3">Honda CBR600RR - 4 Cylinder </option>
        <option value="4">Suzuki GSXR600 - 4 Cylinder</option>
    </select>

    &nbsp&nbsp&nbsp
    Torque Curve:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<select id="torqueCurveSel">
        <option value="1">Cornell Curve 2008</option>
        <option value="2">MIT Curve 2008</option>
        <option value="3">RMIT Curve 2008 </option>
        <option value="4">Fullerton Curve 2008</option>
    </select>



    <br />

    Vehicle Weight:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type="text" id="vehicleWeightTxt" value="530" size="3" />

    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    Number of NOS:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type="text" id="Text1" value="100" size="3" />

    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    NOS Bottle #1:&am开发者_JAVA技巧p;nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type="text" id="Text2" value="3000" size="3" />

    <br />
    Wheel Base: &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp&nbsp&nbsp&nbsp <input type="text" id="wheelBaseTxt" value="61" size="3" />

    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    NOS Bottle #2:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type="text" id="Text3" value="3000" size="3" />

    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    NOS Bottle #3:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type="text" id="Text4" value="3000" size="3" />





    <br />
    Wheel Radius: &nbsp &nbsp &nbsp &nbsp &nbsp&nbsp&nbsp&nbsp<input type="text" id="wheelRadiusTxt" value="10.25" size="3"  />


    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    NOS Bottle #4:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type="text" id="Text5" value="3000" size="3" />

    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    NOS Bottle #5:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type="text" id="Text6" value="3000" size="3" />



    <br />
    Track Width: &nbsp &nbsp &nbsp &nbsp &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type="text" id="trackWidthTxt" value="50" size="3" />

    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    NOS Bottle #6:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type="text" id="Text7" value="3000" size="3" />

    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    NOS Bottle #7:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type="text" id="Text8" value="3000" size="3" />


    <br />
    Center of Gravity: &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type="text" id="hcgTxt" value="12" size="3" />

    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    NOS Bottle #8:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type="text" id="Text9" value="3000" size="3" />

    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    NOS Bottle #9:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type="text" id="Text10" value="3000" size="3" />



    <br />
    Weight Distribution: &nbsp&nbsp&nbsp<input type="text" id="weightDistributionTxt" value="0.50" size="3" />

    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    NOS Bottle #10:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type="text" id="Text11" value="3000" size="3" />

    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    NOS Bottle #11:&nbsp&nbsp&nbsp&nbsp<input type="text" id="Text12" value="3000" size="3" />

    <br />
    Shift RPM: &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type="text" id="shiftRpmTxt" value="9500" size="3" />

    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    NOS Bottle #12:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type="text" id="Text13" value="3000" size="3" />

    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    NOS Bottle #13:&nbsp&nbsp&nbsp&nbsp<input type="text" id="Text14" value="3000" size="3" />


    <br />
    Final Drive Ratio: &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type="text" id="ntTxt" value="2.86" size="3" />

    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    NOS Bottle #14:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type="text" id="Text15" value="3000" size="3" />

    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    NOS Bottle #15:&nbsp&nbsp&nbsp&nbsp<input type="text" id="Text16" value="3000" size="3" />
    <br />


    <br />
    <br />
    <br />




    <center><input type="submit" value="Calculate" onclick="ShowCalculation(); return false;" /></center>
        </div>
    </div>

You can't reliably line up text using  s. You can create the columns using floats, and use a similar technique to line up the labels with the selects - you just need to apply a consistent width to the labels.

Start by restructuring your HTML:

<label for="tireChoiceSel">Tire Choice</label>
<select id="tireChoiceSel">
    <option value="1">Michelin 13"</option>
    <option value="2">Hoosier 13" Large</option>
    <option value="3">Hoosier 13" Small</option>
    <option value="4">Mexican Tires</option>
</select>

Not only is that label good practise in terms of accessibility, it will also provide you a hook to target using CSS.

Then float your labels and give them an explicit width, e.g.

label { float: left; width: 10em; }

That will - more or less - get everything lined up. This isn't the whole story - depending on your requirements, you might want to make this more robust to handle different font sizes etc. - but it's a good start.

This will never work the way you are trying to do it. Between changing font widths and the rendering of non breaking spaces between browsers, its just a fail technique.

That being said, this could easily be considered tabular data, and so is entirely appropriate to use tables and rows. The cells will line up naturally, or you can use a row of spacers to set the column width, old school style.

This could definitely be done with divs or just styled elements, but I would go tables and rows on this.

1. You should use <br /> sparingly:
- Utilize appropriate elements then combine them with CSS to form a line-break (in this case: <label> with CSS: (display: block))

2. Avoid styling the webpage using any markup:
- Instead of using &nbsp; (an HTML Entity), you can use CSS' positioning (float or position) and spacing (padding or margin) properties.

3. Avoid using deprecated elements:
- The <center> is a deprecated element because it is presentational in nature, use CSS instead: (text-align: center).

4. Practice placing title for form elements to tell the user what the elements are for:
- You can chooose between <label> or placing a title attribute directly in the form elements:

Example:

A:
<label for="selection-id">Item Price: </label>
<input id="selection-id" type="text" />

B:
<input type="text" title="Item Price" />

5. No, it's not a tabular data, because:

• The way you visually set it: the alignment 'seems' to not relate on each other (See left to right direction per row)

• It 'looks more like a list' because Tire Choice 'seems' to be related to Vehicle Weight until Final Drive Ratio.

• The <select> and <input> are elements of <form> and not <table>'s (unless you want to place the form inside the table)