title: 2 column form and one div spanning both?
body: <p>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.</p>
  
  <p>The basic form as it stands looks like this,</p>
  
  <pre><code> _______________________________
  |                               |
  | Input 1          Input 2      |
  |                               |
  | Input 3          Input 3      |    
  |                               |
  | Submit           Text         |
  |_______________________________|
  </code></pre>
  
  <p>However, I wan't the Submit button and the text to float it to the right but it breaks my layout :/</p>
  
  <pre><code>&lt;div id="form-wrapper"&gt;
    &lt;form id="contact_form" method="post" action="url/to/your/server/here"&gt;
      &lt;!-- FIRST float left --&gt;
      &lt;div class="float-left c1"&gt;
        &lt;ul&gt;
          &lt;li&gt;       
            &lt;label for="name" id="name" &gt;Name&lt;span class="required"&gt; *&lt;/span&gt;&lt;/label&gt;
            &lt;input type="text" name="name" placeholder="John Doe" autocomplete="off" required&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;label for="telephone" id="telephone" &gt;Contact Number&lt;span class="required"&gt; *&lt;/span&gt;&lt;/label&gt;
            &lt;input type="tel" name="telephone" placeholder="(01225) 123456" autocomplete="off" required&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;label for="email" id="email"&gt;Email:&lt;/label&gt;
            &lt;input type="email" name="email address" placeholder="example@example.com"&gt;
          &lt;/li&gt;
        &lt;/u&gt;
      &lt;/div&gt;
  
  
      &lt;!-- SECOND float left --&gt;
      &lt;div class="float-left c2"&gt;
        &lt;ul&gt;
          &lt;li&gt;
            &lt;label for="enquiry"&gt;Enquiry:&lt;/label&gt;  
            &lt;select id="enquiry" name="enquiry"&gt;  
            &lt;option value="general"&gt;General&lt;/option&gt;  
            &lt;option value="sales"&gt;Sales&lt;/option&gt;  
            &lt;option value="support"&gt;Support&lt;/option&gt;  
            &lt;/select&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;label for="Message" id="Message" &gt;Message&lt;span class="required"&gt; *&lt;/span&gt;&lt;/label&gt;
            &lt;textarea name="message" cols="40" rows="6" required placeholder="Enter your message"&gt;&lt;/textarea&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;       
  
      &lt;!-- Clear - notice this is a sibling of the els with floats --&gt;
      &lt;div class="form_footer"&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;span id="required_field"&gt;* Required fields&lt;/span&gt;&lt;/li&gt;
          &lt;li&gt;&lt;button class="submit" type="submit"&gt;Submit&lt;/button&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  
  
  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;
  }
  </code></pre>