Submit button CSS not listening?

Question

I am creating an e-mail form and would like the text box and submit button to be directly next to each other. They should be touching so that it looks like one continuous rectangle.

However, when I get them touching and set a height the submit button doesn't listen! It doesn't stay the same height. If I increase the submit button height alone by a lot the two boxes are not aligned!

HTML:

<div id="form">
    <input type="text" class="text-input" name="address" id="address" value="" size="23" maxlegnth="30" />
    <input type="submit" value="BUTTON" id="btn-submit" />
</div>

CSS:

#form input{
    border: solid 2px #989898;
    font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
    outline:none;
    background: #d8d8d8;
    font-weight:bold;
    color: #525252;
    position: relative;
    height: 25px;
}
#address{
    text-align: right;
    margin: 0 30 0 auto;
}
#btn-submit{
    margin-left: -7px;
    width: 44px;
    text-align: center;
}

Answer 1

It seems that 2 pixels can't work on the input and button but with 1 pixel borders, it's OK.

Look: http://jsfiddle.net/qwLV7/

Update

This seems to work, but I had to hack the height of the button to be higher than the input,

http://jsfiddle.net/qwLV7/1/

Update 2

How's that now?

http://jsfiddle.net/qwLV7/2/

CSS

#form1
{
    border:solid 2px #989898;
    font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
    background: #d8d8d8;
    font-weight:bold;
    color: #525252;
    position:relative;
    width:194px;
}

input{
  height:25px;
  border:0px;
}

#address{
    text-align:right;
    margin:0 30 0 auto;
    float:left;
    width:150px;
}

#btn-submit{
    width:44px;
    text-align:center;
    float:left;
}

HTML

<div id="form1">
    <input type="text" class="text-input" name="address" id="address" value="" size="23" maxlegnth="30" />
    <input type="submit" value="BUTTON" id="btn-submit" />
    <div style="clear:both"></div>
</div>

Answer 2

The key is to float:left the inputs and then set a height for them. Live example: http://jsfiddle.net/NweS6/

#form input{
    border: solid 2px #989898;
    font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
    outline: none;
    background: #d8d8d8;
    font-weight: bold;
    text-align: right;
    color: #525252;
    float: left;
    height: 25px;
}

#form #btn-submit{
    margin-left: -2px;
    width: 44px;
    text-align: center;
    height: 29px;
}

The reason the submit needs a figure 4px higher than the input is because for some reason it does not take into the account the border on the button, which top and bottom adds up to 4px.

Answer 3

Float the submit button and the layout will look as expected. http://jsfiddle.net/4HcWy/9/

Answer 4

This is how you write an HTML form:

<form method="POST" action"/page/to_post_to" >
    <input type="text" class="text-input" name="address" id="address" value="" size="23" maxlegnth="30" />
    <input type="submit" value="BUTTON" id="btn-submit" />
</form>

Then the elements inside it know it is a form, not just another div.

EDIT: Sorry I misread your question. I thought listening meant it was behaving wrong instead of displaying wrong.

Did you want it to look like the followin? http://jsfiddle.net/4HcWy/6/

form input
{
    border:2px solid #989898;
    font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
    outline:none;
    background: #d8d8d8;
    font-weight:bold;
    color: #525252;
    position:relative;
    height: 25px;
    box-sizing: border-box;
}

#address{
    text-align:right;
    margin:0 30 0 auto;
    border-right: none;
}
#btn-submit{
    margin-left: -7px;
    width:44px;
    text-align:center;
    border-left: none;
}

(Also, since I had used a form element I had to change #form input to form input.)*