How to align multiple form elements?

Question

I don't have a design hint, and I'm trying to get a simple HTML form to look like this: .

Basically, this is a form with three input fields and one submit button.

As for the input fields, there are two above and one below. I would like them to be completely centered with each other, and the second with the same width as above.

As for the submit button, I would like it to be perfectly aligned in the center, both horizontally and vertically, with the input fields, but to the right of them.

I'm not too worried that this is not a fully cross browser.

Thanks for any pointers!

Change I would prefer this to be done using CSS rather than table based. (I heard that table-based is simply evil.)

Answer 1

How about something like this with pure CSS? By the way ... do you know specific measurements regarding input fields and search buttons? Perhaps I could do it a little cleaner if I knew some dimensions. Anyway, check out the demo ...

http://jsfiddle.net/zxSFp/1/

HTML

<div id="wrap"> <div id="fields"> <input type="text" id="left" /> <input type="text" id="right" /> <div class="clear"></div> <input type="text" id="bottom" /> </div> <input type="button" value="Search" id="search-button" /> </div> 

CSS

 #wrap { min-width: 375px; position: relative; } #fields { float: left; position: relative; } #left { height: 15px; width: 150px; float: left; position: relative; } #right { height: 15px; width: 150px; margin-left: 5px; float: left; position: relative; } #bottom { height: 15px; width:309px; margin-top: 5px; position: relative; } #search-button { position: relative; left: 15px; top: 12px; } .clear { clear: both; } 

Hope this helps.

Answer 2

You can use the table. :) Here is the ALL code ready for ya:

 <table> <tbody> <tr> <td><input type="text" /></td> <td><input type="text" /></td> <td rowspan="2" style="vertical-align:middle;"><input type="submit" /></td> </tr> <tr> <td colspan="2"><input style="width:100%" type="text" /></td> </tr> </tbody> </table>