Send CSS button not listening?

Question

I am creating an email form and want the text box and submit button to be directly next to each other. They should touch so that it looks like a solid rectangle.

However, when I get their touch and set the height, the submit button does not listen! He does not stay at the same height. If I increase the height of the submit button separately, the two fields 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

Key to the float:leftinputs, and then set the height for them. Real-time 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;
}

, submit 4px , , - , 4px.

Answer 2

HTML-:

<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>

, form, div.

: , . , , , .

, ? 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;
}

( , form, #form input form input.) *

Answer 3

, 2 , 1 , .

: http://jsfiddle.net/qwLV7/

, , , ,

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

Update 2

How is it 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 4

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