title: Why does my input element drop a line when i use Float:left
body: <p>I have used a CSS style sheet for W3 schools which defines columns of 25% and 75%.  I wanted to add two more column types of 10% and 65%</p>
  
  <p>I copied the .col-25 class and renamed it .col-10 and adjusted the width to 10%</p>
  
  <p>When I add this class to an input field the resulting form displays the input on the next line down and 100% wide</p>
  
  <p>Can anyone explain what I have done wrong?</p>
  
  <pre><code>@charset "utf-8";
  /* CSS Document */
  
  input.invalid, textarea.invalid, select.invalid
  {
      background-color: #ffdddd;
  }
  
  /* Style inputs, select elements and textareas */
  input[type=text], select, textarea{
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    resize: vertical;
  }
  
  /* Style the label to display next to the inputs */
  label {
    padding: 12px 12px 12px 0;
    display: inline-block;
    vertical-align: right;    
  }
  
  /* Style the submit button */
  input[type=submit] {
    background-color: #4CAF50;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    float: right;
  }
  
  .my-button{
    background-color: #4CAF50;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    float: right;
  }
  
  /* Style the container */
  .container {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
  }
  
  /* Floating column for labels: 25% width */
  .col-25 {
    float: left;
    width: 25%;
    margin-top: 6px;
    text-align: right;
  }
  
  /* Floating column for inputs: 75% width */
  .col-75 {
    float: left;
    width: 75%;
    margin-top: 6px;
  }
  
  /* Floating column for inputs: 10% width added by Malcolm but will not     display correctly */
  .col-10 {
    float: left;
    width: 10%;
    margin-top: 6px;
  }
  
  /* Clear floats after the columns */
  .row:after {
    content: "";
    display: table;
    clear: both;
  }
  
  /* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
  @media screen and (max-width: 600px) {
    .col-10, .col-25, .col-75, input[type=submit] {
      width: 100%;
      margin-top: 0;
    }
  }
  </code></pre>
  
  <pre><code>&lt;body&gt;
  GOODS RECEIPT NOTE  
  &lt;div class="container"&gt;
    &lt;form name="f1" id = "f1" &gt;
      &lt;div class="row"&gt;
        &lt;div class="col-25"&gt;
          &lt;label for="haulier"&gt;Customer : &lt;/label&gt;
        &lt;/div&gt;
        &lt;div class="col-75"&gt;
          &lt;input type="text" id="customer" name="customer" placeholder="Customer name"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
  
      &lt;div class="row"&gt;
        &lt;div class="col-25"&gt;
          &lt;label for="haulier"&gt;Haulier : &lt;/label&gt;
        &lt;/div&gt;
        &lt;div class="col-75"&gt;
          &lt;input type="text" id="haulier" name="haulier" placeholder="Haulier name"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
       &lt;div class="row"&gt;
        &lt;div class="col-25"&gt;
          &lt;label for="vehicle_registration"&gt;Vehicle registration : &lt;/label&gt;
        &lt;/div&gt;
        &lt;div class="col-75"&gt;
          &lt;input type="text" id="vehicle_registration" name="vehicle_registration" placeholder="Vehicle registration"&gt;
        &lt;/div&gt;
      &lt;/div&gt; 
  
       &lt;div class="row"&gt;
        &lt;div class="col-25"&gt;
          &lt;label for="airwaybill"&gt;Airwaybill : &lt;/label&gt;
        &lt;/div&gt;
        &lt;div class="col-10"&gt;
          &lt;input type="text" id="Pfx" name="awb_pfx" placeholder="Pfx"&gt;
        &lt;/div&gt;
        &lt;div class="col-25"&gt;
          &lt;input type="text" id="airwaybill" name="airwaybill" placeholder="Airwaybill number"&gt;
        &lt;/div&gt; 
      &lt;/div&gt;
  
       &lt;div class="row"&gt;
        &lt;div class="col-25"&gt;
          &lt;label for="shipper"&gt;Shipper : &lt;/label&gt;
        &lt;/div&gt;
        &lt;div class="col-75"&gt;
          &lt;input type="text" id="shipper" name="shipper" placeholder="Shipper name"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
  
       &lt;div class="row"&gt;
        &lt;div class="col-25"&gt;
          &lt;label for="consignee"&gt;Consignee : &lt;/label&gt;
        &lt;/div&gt;
        &lt;div class="col-75"&gt;
          &lt;input type="text" id="consignee" name="consignee" placeholder="Consignee name"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
       &lt;div class="row"&gt;
        &lt;div class="col-25"&gt;
          &lt;label for="destination"&gt;Destination : &lt;/label&gt;
        &lt;/div&gt;
        &lt;div class="col-75"&gt;
          &lt;input type="text" id="destination" name="destination" placeholder="Consignment destination"&gt;
        &lt;/div&gt;
      &lt;/div&gt;    
  
  
        &lt;div class="row"&gt;       
        &lt;div class="col-25"&gt;
          &lt;label for="pieces"&gt;Pieces : &lt;/label&gt;
        &lt;/div&gt;
        &lt;div class="col-75"&gt;
          &lt;input type="text" id="pieces" name="pieces" placeholder="Number of pieces"&gt;
        &lt;/div&gt;
      &lt;/div&gt;    
  
  
  
  
      &lt;div class="row"&gt;
        &lt;div class="col-25"&gt;
          &lt;label for="documents"&gt;Documents : &lt;/label&gt;
        &lt;/div&gt;
        &lt;div class="col-75"&gt;
          &lt;select id="documents" name="documents"&gt;
            &lt;option value=""&gt;Please select&lt;/option&gt;
            &lt;option value="yes"&gt;Yes&lt;/option&gt;
            &lt;option value="no"&gt;No&lt;/option&gt;          
          &lt;/select&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
  
      &lt;div class="row"&gt;
        &lt;div class="col-25"&gt;
          &lt;label for="subject"&gt;Comments : &lt;/label&gt;
        &lt;/div&gt;
        &lt;div class="col-75"&gt;
          &lt;textarea id="comments" name="comments" style="height:100px"&gt;&lt;/textarea&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="row"&gt;
        &lt;div class="col-25"&gt;
  
        &lt;/div&gt;
        &lt;div class="col-75"&gt;
  &lt;input type="button" class="my-button" name="btn_grn" id="btn_grn" value="Create goods receipt note"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  &lt;div id="errors"&gt;&lt;/div&gt; 
  
  &lt;div id="dialog-confirm" title="Print GRN &amp; labels"&gt;
  
  &lt;/div&gt;
  
  
  &lt;/body&gt;
  </code></pre>