Center Align Submit button

Question

I have a form with a textarea and submit button.
I floated textarea to left and submit button to right.

This is how it is displayed in Firefox.

This is how it is displayed in IE.

This is the html code i have written.

<div id="form">
  <form method="post" action="google.php">
   <textarea rows="3" cols="40"  style="width: 300px; float: left;"></textarea>
   <input type="submit" style="width: 100px; float: right;" />
  </form>
</div>

This is the CSS Code:

#form {
 overflow: auto;
 border: 1px solid black;
 width: 600px;
 padding-left: 10px;
 padding-right: 10px;
}

How to align the submit button vertically in center with respect to the textarea.?

ANSWER :
I modified the code to meet my requirements.

This is the CSS code :

#form {
  overflow: auto;
  border: 1px solid black;
  width: 600px;
  padding-left: 10px;
 padding-right: 10px;
  }
 #form  textarea {
   vertical-align: middle;
  }
 #form span{
   display: inline-block;
   vertical-align: middle;
  margin-left: 40px;
}

HTML Code:

 <div id="form">
    <form method="post" action="google.php">
    <textarea rows="3" cols="40"  style="width: 300px; "></textarea>
    <span><input type="submit" value="Comment"  /></span> </form>
 </div>

Answer 1

You can make use of display:table and display:table-cell, property. But in this case you have to remove floats and give specific width.

HTML

<div id="form">
  <form method="post" action="google.php">
      <div class='wrap'>
   <textarea rows="3" cols="40"></textarea>
      </div>
       <div class='wrap_2'>
<input type="submit"/>
      </div>
  </form>
</div>

CSS

#form{
 overflow: auto;
 border: 1px solid black;
 width: 600px;
 padding-left: 10px;
 padding-right: 10px;
 display:table;
}

div.wrap, 
div.wrap_2 {
    float: none;
    display: table-cell;
    vertical-align: middle;
}

div.wrap {
    width:500px 
}

FIDDLE:

http://jsfiddle.net/7gnMu/