title: How to make form labels align left?
body: <p>I'm trying to customize a Wordpress theme form. Here is the HTML code:</p>
  
  <pre><code>&lt;form id="commentform" class="comment-form"&gt;
  
    &lt;p class="comment-form-author"&gt;
       &lt;label for="author"&gt;Name &lt;span class="required"&gt;*&lt;/span&gt;&lt;/label&gt;
       &lt;input id="author" name="author" type="text"&gt;
    &lt;/p&gt;
    &lt;p class="comment-form-email"&gt;
       &lt;label for="email"&gt;Email &lt;span class="required"&gt;*&lt;/span&gt;&lt;/label&gt;
       &lt;input id="email" name="email" type="text"&gt;
    &lt;/p&gt;
    &lt;p class="comment-form-url"&gt;
       &lt;label for="url"&gt;Website&lt;/label&gt;
       &lt;input id="url" name="url" type="text"&gt;
    &lt;/p&gt;  
    &lt;p class="comment-form-comment"&gt;
       &lt;label for="comment"&gt;Comment&lt;/label&gt;
       &lt;textarea id="comment" name="comment" cols="45" rows="8"&gt;  
       &lt;/textarea&gt;
    &lt;/p&gt;                                                 
    &lt;p class="form-submit"&gt;
       &lt;input name="submit" type="submit" id="submit"&gt;
    &lt;/p&gt;
  
  &lt;/form&gt;
  </code></pre>
  
  <p>And here is my CSS code:</p>
  
  <pre><code>#commentform {
    display: block;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    }
  
  .comment-form-author, .comment-form-email, .comment-form-url, .comment-form-comment {
        display: block;
        -webkit-margin-start: 2px;
        -webkit-margin-end: 2px;
        -webkit-padding-before: 0.35em;
        -webkit-padding-start: 0.75em;
        -webkit-padding-end: 0.75em;
        -webkit-padding-after: 0.625em;
         margin: 0 2px;
         padding: 0.2em 0.625em 0.75em;
         }    
  
  #commentform label {
        display: inline-block;
        float: left; 
        width: 20%; 
        }
  
  #commentform input[type="text"], #commentform textarea {
        display: inline-block;
        float: left; 
        width: 65%; 
        padding: 0.6em;
        padding-bottom: 0.1em;
        padding-left: 0.3em; 
        } 
  </code></pre>
  
  <p>I have another form on another page with the same CSS, it displays fine but here the labels stick to the right and stack on top of each other when I apply float. What I'm trying to do is put the labels on the left and inputs on the right so they will be on the same line inside the .comment-form. What am I doing wrong?</p>
  
  <p>Thanks.</p>