Question

I am struggling to see why 1 input element is not dropping to line up withe the label. I have tried various options, but still the same. I have included a grab and the css and would be grateful if someone could show me my error. Thanks

.adduserform {

        width:425px;
        font:12px Arial, Helvetica, sans-serif;
        color:#777;
        background-color:#fff;
        font-weight:bold;
        padding: 10px;

        }

.adduserform label {

            display:block;
            width:110px;
            float:left;
            font-weight:normal;
            font-size:12px;
            padding: 0 0 0 30px;
            z-index:1000;
            clear:both;

        }

.adduserform .inputbox {

            float:right;
            border:1px solid #ccc;
            font-family:Verdana, Arial, Helvetica, sans-serif;
            font-size:10px;
            width:40%;

        }

.adduserform textarea {

            padding:8px 3px 2px 3px;
            margin:2px 0 10px 3px;
            border:1px solid #ccc;

        }

.adduserform select {

            float:left;
            font-family:Verdana, Arial, Helvetica, sans-serif;
            font-size:11px;
            outline:none;
            clear:right;

        }

+++UPDATE HTML+++++

<dl>
 <dt>
   <label for="AUSR_phone">Phone:</label>
 </dt>
 <dd>
   <input id="AUSR_phone" name="AUSR_phone" type="text" size="32" maxlength="128" value = "" />
  </dd>
</dl>

Answer 1

You’re floating the input box right, but the top select is not wide enough to force the input onto a second line. The bottom two are being forced down because the area is not wide enough to accommodate both input fields.

You can try putting both your label and input/select inside a div and use float to control positioning within that div:

html:

<div>
<label>text</label>
<input type="text"/>
</div>

css:

label {float:left; width:30%; margin:0 1em; }
input, select {float:left; width:60%; }
div {overflow:hidden; width:100%;}