Any way to make form fields expand to available width?

[xor]

I'm tweaking the layout on some forms for a project at work and I need to get some of the form fields (input, select and textarea) to expand to fill in the available space if the user has a higher screen resolution. We need to support IE and Firefox and screen resolutions from 800x600 to 1024x768. The forms are laid out within tables. When the resolution increases the tables expand to fill the width of the screen, and the table cells resize accordingly. But I haven't been able to find a way to get the form fields to resize to fill in the available space.

Is there a way to do this with CSS?

[Milt]

I have css width:nn% on fields before (actually textarea) but it may work for your situation.

Try this...

<td><input style="width:100%"></td>

[bluedreamer]

Works for me as well and seems fine in the major browsers.

[xor]

Thanks both of you. I'll give it a go. I know that there was a style applied to the field which had width: 98% and that was causing the textarea to collapse down to nothing but the scrollbars. The code I'm working on is generated by a program so it's a bit of work trolling through it. I'll have a much closer look now.

Thanks!

[xor]

For some reason this just isn't working in the code I'm tweaking. IE especially seems to have a problem with it. The code is so messy though there could be something else influencing it which I'm not picking up. But it's good to know for future reference... when I write my own nice tidy code

[xor]

Would border-collapse: collapse on the main table cause problems/conflicts with the width:100%?

[Tyssen]

Using % it's only going to expand to 100% of the table cell so you may need to set % widths on your table cells as well.

[bluedreamer]

It's also worth setting a height on <textarea>'s as well to be safe!