Bizarre: css font makes element move position

I have bizarre css behavior. I have a div container (#right-input) that houses a textarea and button and they pop out of #userinput container if I do not delete the font: x-small arial,helvetica,sans-serif; in a body tag that I have. Anyone have any ideas? How can a font declaration affect an element like that?

body { 
    font: x-small arial,helvetica,sans-serif;
    background: #000;
    margin:0;
text-align:center;
}
#userinput {
    font-size:130%;
color: #333;
    margin:10px auto 10px auto;
    padding:10px;
    background: #F7F7F7;
    width:570px;
height:135px;
    position:relative;
z-index:9999;
  border: 1px solid #888;
  -moz-border-radius-bottomleft:7px;
-moz-border-radius-bottomright:7px;
-moz-border-radius-topleft:7px;
-moz-border-radius-topright:7px;

opacity: 0.85;
    /* for IE */
  filter:alpha(opacity=85);
}
#right-input{
        clear:left;
float:right;
width:480px;
}



  <div id="userinput">
    <div id="right-开发者_运维问答input">    
        Send a message to others watching!
        <form id="form" action="form.php?action=add" method="post"> 

                    <TEXTAREA id="message" class="limited" name="message" maxlength="1000" COLS="45" ROWS="6"></TEXTAREA>
            <br>
<input id="send" type="submit" value="Send!" />     
        </form>

    </div>
    </div>

With your current code, if you resize #right-input, it doesn't adjust #userinput because #right-input is floated which takes it out of the document flow.

Try changing your html to this:

<div id="userinput">
    <div id="right-input">    
        Send a message to others watching!
        <form id="form" action="form.php?action=add" method="post"> 

            <TEXTAREA id="message" class="limited" name="message" maxlength="1000" COLS="45" ROWS="6"></TEXTAREA>
            <br>
            <input id="send" type="submit" value="Send!" />     
        </form>

    </div>

    <!-- added div to clear float -->
    <div style="clear:both;"></div>

</div>

It should make sure that your textarea will stay inside its div.

If you say that font: x-small causes the problem, try to replace it with

font-size: 14px; /* 14px - for example */
font-family: arial,helvetica,sans-serif;