Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Fit a textbox and a button inside a div

Tags:

html

css

How can I put <input type="text"/> and <input type="button"/> in one line, like this... Example
...so that they fit inside their parent (<div> for example), with textbox taking maximal possible width?

Of course, additional divs can be used. tables are allowed but discouraged.

like image 235
Oleh Prypin Avatar asked Aug 04 '10 21:08

Oleh Prypin


1 Answers

Using a table-based approach, you could:

<table cellspacing="0" cellpadding="0" width="100%">
    <tr>
        <td><input type="text" style="width:100%"/></td>
        <td style="width:60px"><input type="button" style="width:100%"/></td>
    </tr>
</table>

The effect is a table that fills its parent width containing a fixed-width button adjacent to a textbox that fills the remaining width.

Of course, out of habit, I would refactor the CSS into an external file.

Edit:

Here's a div-based approach:

It happened to be the case that these div-based approaches worked well enough in IE 7 and IE8, but not Firefox

<div>
    <div style="float:right; width:60px">
        <input type="button" style="width:100%"/>
    </div>
    <div>
        <input type="text" style="width:100%"/>
    </div>
    <div style="clear:both"></div>
</div>

And, perhaps, a lighter div-based approach:

<div>
    <input type="button" style="float:right; width:60px"/>
    <input type="text" style="width:100%"/>
    <div style="clear:both"></div>
</div>

I recommend browser-testing div-based approaches.

like image 184
kbrimington Avatar answered Oct 09 '22 17:10

kbrimington