I have not a clue at design, and I am looking to get an easy HTML form to appear such as this: .

Essentially, it is a form with three input fields and one submit button.

Concerning the input fields, you will find two on the top and one below. I would like those to be perfectly center-aligned with one another and also the second someone to stretch to become exactly the same width because the ones above.

Concerning the submit button, I'd want it to be perfectly center-aligned, both flat and up and down, using the input fields, but be right of those.

I am much less concerned about it not fully mix-browser.

Thank you for any pointers!

Edit: I'd prefer whether it were completed with CSS instead of be table-based. (I hear table-based is simply plain evil.)

You could utilize a table. :) Here's the 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>

What about something similar to this with pure CSS? Incidentally... are you aware specific dimensions relating to your input fields and also the search button? I possibly could most likely do that just a little cleaner basically understood some dimensions. Anyway, browse the demo...

http://jsfiddle.internet/zxSFp/1/

HTML

<div id="wrap">

    <div id="fields">

        <input type="text" id="left" />

        <input type="text" id="right" />

        <div class="obvious"></div>

        <input type="text" id="bottom" />

    </div>

    <input type="button" value="Search" id="search-button" />

</div>

CSS

#wrap 

#fields 

#left 

#right 

#bottom 

#search-button 

.obvious obvious: both



I really hope this can help.