Question

I’ve made a form using HTML with two columns for the input fields and then a ‘footer’ row with the forms submit button and other text in it.

The basic form as it stands looks like this,

 _______________________________
|                               |
| Input 1          Input 2      |
|                               |
| Input 3          Input 3      |    
|                               |
| Submit           Text         |
|_______________________________|

However, I wan’t the Submit button and the text to float it to the right but it breaks my layout :/

<div id="form-wrapper">
  <form id="contact_form" method="post" action="url/to/your/server/here">
    <!-- FIRST float left -->
    <div class="float-left c1">
      <ul>
        <li>       
          <label for="name" id="name" >Name<span class="required"> *</span></label>
          <input type="text" name="name" placeholder="John Doe" autocomplete="off" required>
        </li>
        <li>
          <label for="telephone" id="telephone" >Contact Number<span class="required"> *</span></label>
          <input type="tel" name="telephone" placeholder="[phone]" autocomplete="off" required>
        </li>
        <li>
          <label for="email" id="email">Email:</label>
          <input type="email" name="email address" placeholder="[e-mail]">
        </li>
      </u>
    </div>


    <!-- SECOND float left -->
    <div class="float-left c2">
      <ul>
        <li>
          <label for="enquiry">Enquiry:</label>  
          <select id="enquiry" name="enquiry">  
          <option value="general">General</option>  
          <option value="sales">Sales</option>  
          <option value="support">Support</option>  
          </select>
        </li>
        <li>
          <label for="Message" id="Message" >Message<span class="required"> *</span></label>
          <textarea name="message" cols="40" rows="6" required placeholder="Enter your message"></textarea>
        </li>
      </ul>
    </div>       

    <!-- Clear - notice this is a sibling of the els with floats -->
    <div class="form_footer">
      <ul>
        <li><span id="required_field">* Required fields</span></li>
        <li><button class="submit" type="submit">Submit</button></li>
      </ul>
    </div>
  </form>
</div>


a { 
    outline: none; 
}

html, body {
    background:url(images/bg.png);
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 0.915em;
    line-height: 14px;
    }

#form-wrapper {
    width: 550px;
    display: block;
    background: #f6f4f4;
    border: #d2cece solid 1px;
    }

#required_field {
    float: right;
    padding: 0 40px 10px 0;
    color: #D45252;
    font-size: 11px;
    font-weight: bold;
    font-family: Lucida Sans, Lucida Grande, Lucida Sans Unicode, sans-serif;
    }

.required {
    color: #D45252;
    font-weight: bold;
    }

#contact_form ul li {
    list-style: none;
    position:relative;
    }

input, textarea, select {
    background:url(images/bg.png);
    font-family: Helvetica, Arial, sans-serif;
    display: block;
    margin: 10px 10px 15px 0px;
    resize: none;
    -moz-border-radius: 3px;
    border-radius: 3px;
    }

/* chrome, safari */  
::-webkit-input-placeholder {  
    color:#CCC;  
}  
/* mozilla */  
input:-moz-placeholder, textarea:-moz-placeholder {  
    color:#CCC;  
}  
/* ie (faux placeholder) */  
input.placeholder-text, textarea.placeholder-text  {  
    color:#CCC;    
} 


.submit {
    font-family: Helvetica, Arial, sans-serif;
    }

.float-left {
    float: left;
}

.float-right {
    float: right;
}

.form_footer {
    clear: both;
}

Answer 1

Floating elements can break your layout if you don’t clear the floats of the parent element.
That’s exactly what’s happening in your code.

You are floating the submit button without any clearfix to the main parent div, in this very case <div id="form-wrapper".

Just apply a good clearfix to the wrapper and you should be good to go.
I posted this solution on my jsbin.

I used Nicolas Gallagher’s micro clearfix hack.

As a reference you can read this SO thread.