title: Cannot vertically align float element and surrounding elements
body: <p>I have a couple of problems regarding floating element alignment, 
  I'm trying to make table cell that has a couple of elements inside. Like text input and then dropdown, and only text input should be resized when user resize browser window. Here, how I do it:</p>
  
  <pre><code>&lt;table style="width: 100%;"&gt;
      &lt;tr style="vertical-align: bottom;"&gt;
          &lt;td style="white-space: nowrap; width: 20%;"&gt;
              &lt;div&gt;&lt;span style="float: right; display: block;"&gt;
                  &lt;select style="display:show;width:60px"&gt;
                      &lt;option selected="" value="1"&gt;1&lt;/option&gt;
                      &lt;option value="2"&gt;2&lt;/option&gt;
                  &lt;/select&gt;
                  &lt;/span&gt; &lt;span style="display: block; overflow: hidden; padding-right: 2px;"&gt;
                  &lt;input type="text" value="100.0" style="width:100%; text-align:right"/&gt;
              &lt;/span&gt;&lt;/div&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>but floating element appears a bit upper that non-floating.
  <img src="https://i.stack.imgur.com/0YF72.png" alt="enter image description here"></p>
  
  <p>Also I have another case when I have link, then input text field, then dropdown or another link, again, input field should be the only resizible element.</p>
  
  <p>here is the code</p>
  
  <pre><code>&lt;table style="width: 100%;"&gt;
      &lt;tr style="vertical-align: bottom;"&gt;
          &lt;td style="white-space:nowrap; width: 30%;"&gt;
            &lt;span style="display: block; float: left; padding-top: 3px;"&gt;
              &lt;a href="return false;"&gt;&lt;img width="14" height="14" src=""/&gt;
              &lt;/a&gt;&amp;nbsp;
            &lt;/span&gt;
            &lt;span style="float: right; display: block; padding-top: 5px;"&gt;
          &lt;a href="return false;"&gt;&amp;nbsp;?&lt;/a&gt;
            &lt;/span&gt;
            &lt;span style="display: block; overflow: hidden; padding-right: 2px;"&gt;
          &lt;input value=""style="width: 100%;"&gt;
            &lt;/span&gt;
           &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>what in this case, is that non-floating element is upper that the others:</p>
  
  <p><img src="https://i.stack.imgur.com/NeinP.png" alt="enter image description here"></p>
  
  <p>Basically, I need to somehow vertically align floating element in the first sample, so it bottom will be the same as bottom of non-floating element and in the second sample i need to somehow align bottom of non-floating element, so it'll be the same as floating elements.</p>
  
  <p>I'm trying to make it work in ie 7, 8, 9, 10. </p>
  
  <p>Adding paddings will do the trick, but then it'll look ugly in firefox, chrome.</p>
  
  <p>Edit:</p>
  
  <p>Or at least tell me why this can't be done.</p>
  
  <p>Edit2:</p>
  
  <p>Or if the problem is with table tag? So I need use something different (divs). The whole structure is a table with only difference that there are some selects and such a like in cells, so it's very natural to use table here. But, well, if problem is with table, I'll try to recreate it with divs.</p>
  
  <p>Edit3: </p>
  
  <p>Even if I remove table, right floating element in sample 1 is a bit higher.
  I tried to replace float with padding and absolute positioning, but still it's higher.</p>
  
  <p>Edit4:</p>
  
  <p>For sample 1, if I set <code>display: none</code> for left element, then floating element vertical position becomes normal.</p>
  
  <pre><code>*** UPDATE: Sorry that was my mistake to put bounty on this question, i've already solved my problem.***
  </code></pre>