title: HTML element not obeying vertical align styling when float styling is used
body: <p>I have the following simple HTML and styling (<a href="http://jsfiddle.net/ZLNvv/" rel="nofollow">http://jsfiddle.net/ZLNvv/</a>).</p>
  
  <pre><code>&lt;DIV&gt;
      &lt;BUTTON class="button"&gt;&lt;/BUTTON&gt;
      &lt;INPUT class="textbox" type=text&gt;
  &lt;/DIV&gt;
  
  .textbox{vertical-align:middle}
  .button{float:left;width:75px;height:75px}
  </code></pre>
  
  <p>The button is oversized to show clearly that the input box isn't obeying vertical-align:middle. If I remove the float:left styling on the button, the vertical aligning works. Is there any way to combine the two?</p>
  
  <p>I've given the most minimal example which shows the problem, a more accurate example of what I am trying to achieve is below (<a href="http://jsfiddle.net/peerz/" rel="nofollow">http://jsfiddle.net/peerz/</a>).</p>
  
  <pre><code>&lt;DIV&gt;
      &lt;DIV&gt;Header&lt;/DIV&gt;
      &lt;DIV class ="lineDiv"&gt;
            &lt;Div class="subHeaderDiv"&gt;
                    &lt;BUTTON class=button&gt;&lt;/BUTTON&gt;
                    &lt;div class="subHeaderText"&gt; Subheader 1&lt;/div &gt;
            &lt;/Div&gt;
            &lt;INPUT class="textbox" type=text&gt;
      &lt;/DIV&gt;    
      &lt;DIV class ="lineDiv"&gt;    
            &lt;Div class="subHeaderDiv"&gt;  
                    &lt;div class="subHeaderText"&gt; Subheader 2&lt;/div &gt;
            &lt;/Div&gt;
            &lt;INPUT class="textbox" type=text&gt;
      &lt;/DIV&gt;
  &lt;/DIV&gt;
  
  .lineDiv{overflow:auto}
  .subHeaderDiv{float:left;width:50%}
  .subHeaderText{float:right;vertical-align:middle}
  .textbox{float:left;height:30px;vertical-align:middle}
  .button{float:left;width:75px;height:75px}
  </code></pre>
  
  <p>Thank you for any help.</p>