Fields will not float left

Question

I am a newbie, I am having a frustrating problem. 2 out of 8 of my text fields will not float left, even though they are using the same or similar script as the other other fields. It is very frustrating, as you can see below:

/*franchise details form container*/
div#section_left{
     padding: 0;
    position:absolute;
    width: 76%;
    height: 100%;
    float: right;
    margin-top: 60px;
    margin-left: 310px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 30px;
   }

div.field{
      position: relative; 
  
     }

     /*Form fields styling*/
     /* red box*/

    div.field,
    div.field:before,
    div.field input#fran_name,
    input#fran_email,input#mang_name,
    input#address1, input#franc_phone{
    height: 33px;
    padding: 0;
    border-width: 0;
    /* remove default border */  
    }

      div.field input#fran_name,
      input#fran_email,input#mang_name,
      input#address1, input#franc_phone{
      border: 1px solid #6d6e70;
      border-left: 0px;
      padding-left: 5px;
      border-radius: 0 5px 5px 0;
      width: 40%;
      margin-bottom: 10px;
      }

     div.field:before{  
     content: "\f015";
     width: 30px;
     height: 30px;
    border: 1px solid #e86065;
    display: inline-block;
    float: left;
    position: relative;
    background: #e86065;
    color: white;
    text-align: center;
    line-height: 33px;
    border-radius: 5px 0 0 5px;    
    }

    div.field1:before{
    content: "\0260E";
    width: 30px;
    height: 30px;
    border: 1px solid #e86065;
    display: inline-block;
    float: left;
    position: relative;
    background: #e86065;
    color: white;
    text-align: center;
    line-height: 33px;
    border-radius: 5px 0 0 5px;    
    }

    div.field2:before{
    content: "\0260E";
    width: 30px;
    height: 30px;
    border: 1px solid #e86065;
    display: inline-block;
    float: left;
    position: relative;
    background: #e86065;
    color: white;
    text-align: center;
    line-height: 33px;
    border-radius: 5px 0 0 5px;    
    }

    div.field3:before{
    content: "\0260E";
    width: 30px;
    height: 30px;
    border: 1px solid #e86065;
    display: inline-block;
    float: left;
    position: relative;
    background: #e86065;
    color: white;
    text-align: center;
    line-height: 33px;
    border-radius: 5px 0 0 5px;    
    }

    div.field4:before{
    content: "\0260E";
    width: 30px;
    height: 30px;
    border: 1px solid #e86065;
    display: inline-block;
    float: left;
    position: relative;
    background: #e86065;
    color: white;
    text-align: center;
    line-height: 33px;
    border-radius: 5px 0 0 5px;  
    margin-top: 55px;
    }

    div.field4 input#franc_phone{
    margin-top: 55px;
    }

    input#address2,input#city {
    border: 1px solid #6d6e70;
    border-radius: 5px;
    width: 43%;
    height: 33px;
    display: inline-block;
    line-height: 33px;
    float: left;
    position: relative;
    margin-bottom: 10px; 
    }

    input#pcode{
    border: 1px solid #6d6e70;
    border-radius: 5px;
    width: 20%;
    height: 33px;
    line-height: 33px;
    float: left;
    position: relative;
    margin-top: 10px; 
    margin-bottom: 10px;
    }

   .clr{
   clear: both;
}

<div id="section_left">
            <form id="franchiseDets" action ="Franchise-Details.php" method="POST">

                <div class="group1">
                    <!--                franchise details form-->
                    <div class="field">

                        <input type="text" name="fran_name" id="fran_name" value="<?php echo $_SESSION['fran_name']; ?>"  placeholder="e.g One Delivery Leeds" pattern="[a-zA-Z]" 
                               autofocus required tabindex="1"></div>
                    <br>

                    <div class="field1">


                        <input type="email" name="fran_email" id="fran_email" value="<?php echo $_SESSION['fran_email'] ?> ' <?php echo $disabled ?>" placeholder="leeds@one-delivery.co.uk" required tabindex="2">
                    </div>
                    <br>

                    <div class="field2">

                        <input type="text" name="mang_name" id="mang_name" value="<?php echo $_SESSION['mang_name']; ?>" placeholder="Joe Blogs" required tabindex="3">

                    </div>
                    <br>
                    <div class="field3">
                        <input type="text" name="address1" id="address1" value="<?php echo $_SESSION['address1']; ?>" placeholder="Address Line 1" tanindex="4">
                    </div>
                    <br>


                    <input type="text" name="address2" id="address2" value="<?php echo $_SESSION['address2']; ?>" placeholder="Address Line 2" tabindex="5">
                    <br>
                    <br>
                    <input type="text" name="city" id="city"  value="<?php echo $_SESSION['city']; ?>"placeholder="Town/City" tabindex="6">
                    <br>
                    <br>


                    <input type="text" name="pcode" id="pcode"  value="<?php echo $_SESSION['pcode']; ?>"  placeholder="Postcode" tabindex="7">
                    <br>


                    <div class="field4">
                        <input type="tel" name="franc_phone" id="franc_phone"  value="<?php echo $_SESSION['franc_phone'] ?>"  placeholder="Customer service number" min="10" maxlength="11" pattern="[0-9]{3}[-][0-9]{4}[-][0-9]{4}" 
                               required title="Please provide your customer service number in the following format: 000-0000-0000" tabindex="8"> </div>

                </div>
                <br>
                </div>
                </div>
</form>

The divs wrapped the forms are the only way the red box in the css works, i have also removed them to see if they are the reason for the problem and they weirdly are not. What can i do to resolve this

Answer 1

If you're looking to have all you're text boxes align on the left, that's not floating left. Looking at the example image, the only two elements that look to be properly floating left are 2 which are offset from the left. Try removing all left floats from your css and set the body text-align property to left.

body {
    text-align: left;
}

Answer 2

All the other inputs are wrapped in a DIV element - wrap the rest in DIV as well and it should work.