Layout of form elements >> Search box

[ucahg]

Hi,

I am trying to lay out a search box in a column on my web site, but am failing miserably.

I have attached an image of what I am aiming for, but I can't seem to get it right in CSS.

I want the input box + submit button combination to take up 100% of the column. The submit button will be a fixed width (in em's) but the text input I want to expand to fill out the rest of the column. Is this possible in CSS (while still keeping the source order of the input before the submit button)?

Please help [img]images/smilies/smile.gif[/img]

(the attachment has to be approved first I believe so it won't show up right away)

[CRYSTL]

How about this one?

<span style='white-space:nowrap;'>
 <input style='float:right; margin-left:5px' type=submit>
 <input type=text style='width:100%;'>
</span>

Update: Damn, that works in Mozilla only.

[ucahg]

I know, I was thinking this would just be a simple case, but I think since these are form elements they are a bit more unpredictable.

Also I'd prefer to have the submit button after the input type in the source, but if that's not possible then I may have to have it before.

[ucahg]

Because this was sliding far down the page before the image was approved, and thus most people didn't even see the image, I think a bump may be forgivable in this case

[hurricane.uk]

Set a fixed width for the button and use width: auto; for the text box?