Unusual html form

Question

I am trying to create a contact form but the layout is not like any other layout. I am having problems designing the layout

contact form

Contact Name
[......]     [........]      [..........]
firstname    middlename       Lastname

Phone
[.......]            [.......]
 areacode               phone

 <form>
    <div class="form-all">
        <div class="form-all">
    <ul class="form-section">
      <li class="form-line" id="id_69">
        <label class="form-label-top" id="label_69" for="input_69">
          CONTACT NAME<span class="form-required">*</span>
        </label>
        <div id="cid_69" class="form-input-wide">
        <span class="form-sub-label-container">
        <input class="form-textbox validate[required]" type="text" size="10" name="q69_contactName69[first]" id="first_69">
            <label class="form-sub-label" for="first_69" id="sublabel_first"> First Name </label></span><span class="form-sub-label-container"><input class="form-textbox" type="text" size="10" name="q69_contactName69[middle]" id="middle_69">
            <label class="form-sub-label" for="middle_69" id="sublabel_middle"> Middle Name </label></span><span class="form-sub-label-container"><input class="form-textbox validate[required]" type="text" size="15" name="q69_contactName69[last]" id="last_69">
            <label class="form-sub-label" for="last_69" id="sublabel_last"> Last Name/Surname </label></span>
        </div>
      </li>

something similar to http://www.esvalmodels.com/order_form_jotform.html

Answer 1

As TGH suggests, you should use float:left;. On span elements add display:block; to get it to work.

.form-sub-label-container {
    display:"block";
    float:left;
}

http://jsfiddle.net/XX4ju/

Answer 2

Use divs with float left css style.

<div style="float:left">FirstName</div><div style="float:left">MiddleName</div>