<!-- CSS First (Obviously this needs to be places in a style tag in the head)
div.input_master{
    width:100%;
    display:inline-block;
    white-space: nowrap;
}
div.input_subset{
    display:inline;
    width:100%;
}
input.text{
    width:100%;
}
input.button{
    width:90px;
    margin-right:5px;
    display:inline;
}
End CSS -->

<!-- HTML code -->
<table border="1" width="100%">
    <tr>
        <td style="width:15%;">Enter Text</td>
        <td style="width:35%;padding-right:100px;">
            <div class="input_master">
                <div class="input_subset">
                    <input type="text" class="text" />
                </div>
                <input type="button" class="button" value="Button">
            </div>
        </td>
        <td style="width:15%;"></td>
        <td style="width:35%;"></td>
    </tr>
</table>

http://fatfolderdesign.com/225/css/100-width-text-area-with-adjacent-button

A contract I work on uses tables to layout forms (kinda ghetto I know) and I wanted a text field with a button text to it that would work with their 100% width scheme. Normall it places to betton below the text input, but using this HTML and CSS it will go next to it.

One thing to note is that the button has to have a width, and you need that width + any margin you give the button to be updated accordingly. In this example the button is 95P with a 5Px right margin on it, the to magic number is 100Px, it has to be updated in both the inline style on the table and in he CSS. Also this will work outside a table, as long as all the divs are in something with an appropriate badding on it.

There is no reason that can't all be inline or all be in the stylesheet, it's just based on the way they lay out the becked of their CMS.

Questions can be posted here or (preferable) at the link, theres an example of it in action there too (not that it's a complicated thing to make yourself)

100% WIDTH TEXT AREA WITH ADJACENT BUTTON

css, html, forms

HTML