CSS aligning text boxes with labels

Question

My fiddle pretty much shows the problem. Trying to get the labels to be on the left side of each text box if anyone could help. http://jsfiddle.net/HC64Y/

<div id="boxalign2" class="boxalign2" >                 
    <label>Hospital*:</label><input class="rounded2" required title="Hospital is required!" name="MainHospital" type="text" />  
    <label>Title*:</label><input class="rounded2" name="MainTitle" type="text"/>            
    <label>Department*:</label> <input class="rounded2" name="MainDept" type="text"/>
</div>

css

input.rounded2 {
    border: 1px solid #ccc;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -moz-box-shadow: 2px 2px 3px #666;
    -webkit-box-shadow: 2px 2px 3px #666;
    box-shadow: 2px 2px 3px #666;
    font-size: 20px;
    padding: 4px 7px;
    outline: 0;
    -webkit-appearance: none;

    float: left;
    display: inline-block;
    clear: left;
    width: 150px;
    text-align: right;
}

Answer 1

You can give to your div .boxalign2 and label fixed widths.

View the demo http://jsfiddle.net/HC64Y/11/

.boxalign2 {
  width:400px;
}

label {
  text-align:right;
  padding-right:20px;
  display:inline-block;
  min-width:150px;
}

Answer 2

You are making your inputs inline-block, but you are also floating them to the left.

If you remove the float: left and add <br> after each input, you will get the correct behavior.

http://jsfiddle.net/A8es3/

To align the boxes, add a div wrapper around each label/input, make your label inline-block with a fixed width. There are other ways to do this as well, but this is one way.

http://jsfiddle.net/A8es3/1/

As stolli mentioned, you can also simply use the label element as the wrapper:

http://jsfiddle.net/A8es3/2/