How to use css to vertical align mixed elements?

Question

So my boss says to me, "Hey you! Make it so there is a banner at the top our website that has our phone numbers and the signup for our newsletter in one line." Although I am old and easily confused I figured it was high time to stop using tables and do it with css like god intended.

<div id="hdr">
<i>Call us today</i> &nbsp;&nbsp; CorpHQ - nnn.nnn.nnnn &nbsp;&nbsp;
<i>Sign up for our newsletter:</i>&nbsp;&nbsp;
<form action="signup.php" method="post">
<input name="email" type="text">
<input name="submit" type="submit" value="SUBMIT">
</form>
</div>

However, no matter what I try to do get things vertically aligned, I get all sorts of inexplicable results depending upon whether the site is viewed in Chrome, IE6, IE7, and Firefox. (I'm mainly talking about the size and vertical centering of the field and submit button.)

1) Is there a BIG SECRET here I don't know about?

2) Should I just go back to my original plan to use a table?

3) Is CSS actually a cruel trick invented by space aliens to keep us occupied while they print up copies of "To Serve Man"?

Halp!

Answer 1

1. No
2. No
3. No

Put each item in it's own div, and all those divs in a parent div.

<div class="wrapper">
  <div class="contact"></div>
  <div class="signup_form"></div>
</div>

Now, you can align the parent div (wrapper) however you want, and each element contained inside the wrapper will start out with the placement of the wrapper (then you can change each element as needed).

.wrapper {
  width: 800px;
  margin: 0px auto; /* centered */
}

.contact {
  height: 200px;
  margin-left: 80px; /* will be 80 pixels off of the center */
  float: left; /* placed to the left */
}

.signup_form {
  float: right;
}

Now the contact and signup form will be on the same line.

Answer 2

<div id="hdr">
<form action="signup.php" method="post">
<i>Call us today</i> &nbsp;&nbsp; CorpHQ - nnn.nnn.nnnn &nbsp;&nbsp;
<i>Sign up for our newsletter:</i>&nbsp;&nbsp;

<input name="email" type="text">
<input name="submit" type="submit" value="SUBMIT">
</form>
</div>

The form displays as a block. So it will "jump" to the next line. This is only a quick+dirty fix. You should use labels, stop using <i>, stop using   for spacing and probably others I don't know about. Oh and also make sure you're not in quirks mode.