Formatting Divs for MVC - how to?

If I am making a page using only the DIV elements - how would I go about aligning it to something shown in the picture below? What is the best approach (besides trial and error :)

I am not experienced in css and if you answer contains usage of this please provide brief explanation.

Bonus: How can I easily make the first column right-aligned as开发者_JAVA技巧 well?

This is how you will generally go about it, given the following markup :

   HTML :

    <div class="label">Name</div>
    <div class="field"><input type="text" name="xxx"></div>

    CSS:

    .label
    {
      float:left;
      clear: left;
      text-align:right;
    }

    .field
    {
        float:left   
        padding-left:10px;
     }

Basically add the label class to the first div, and field class to the second. and then repeat the pattern for each of your fields in the form.

Edit: For 3 Columns:

<div class="label">Name</div>
<div class="field"><input type="text" name="xxx"></div>
<div class="field">Help Text  ...blah blah blah</div>

Just apply class field to any divs you want to appear in the same line. Apply class label to any div you want to start in a new line.