Submit Button Css Not Listening?

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

Solution 1:

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

#forminput{
    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.

Solution 2:

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

Solution 3:

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/

forminput
{
    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:0300 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.)*

Solution 4:

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