How to make a html tag expand as much as possible to fit the parent width?

Question

I want to make a textfield in my html page to expand as much as possible to fit the parent width. Here is an image shows what I want.

I try to use width: 100%, but the browser sets the width of elemnt as its parent's, which makes no room for other elements, they have to to be placed in second line. How can I let the element to expand as much as possible to fit all space in single line?

Thanks.

Answer 1

If you want to make the input ‘100% minus the widths of those other things’ you're into CSS layout stuff.

You could float: left the label, float: right a wrapper around the buttons, and set left and right margins on a wrapper around the input, then set the input to width: 100%.

(But personally, liquid-layout forms is one of the places I still typically resort to tables, as combining a series of fixed- and variable-width columns is something that easily stretches CSS layout beyond its limits.)

Answer 2

I agree with bobince. I would look into a table option. I would either decide on fixed:width that works for you within the table, or try to make the width:100% within the table.