title: How to right align this submit button?
body: <p>I have a large number for forms with submit buttons and I need to right align the buttons.  The problem is that when I use <code>float: right</code>, the submit element is taken out of the normal document flow.  This means the form's height is reduced and it's bottom border then interferes with the button.</p>
  
  <p>Here's the code:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;style type="text/css"&gt;
          #left-col {
              width: 290px;
          }
          #loginForm {
              border: 1px solid black;
          }   
          #submit {
              /* float: right; */
          }
  
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="left-col"&gt;
          &lt;div id="loginForm"&gt;
              &lt;form id="user-login-form" enctype="application/x-www-form-urlencoded" method="post" action=""&gt;
                  &lt;label for="email" class="required"&gt;Email&lt;/label&gt;
                  &lt;input type="text" name="email" id="email" value=""&gt;
                  &lt;label for="password" class="required"&gt;Password&lt;/label&gt;
                  &lt;input type="password" name="password" id="password" value=""&gt;
                  &lt;input type="submit" name="submit" id="submit" value="Login" class="submit"&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The forms are generated programatically (using Zend_Form) so I am hoping to avoid hacks that require additional elements (such as paragraphs with clear: both).</p>
  
  <p>Hopefully this will be a simple question for a CSS guru!</p>
  
  <p>Thanks...</p>