How to align multiple form elements?

Question

I've no clue at design, and I'm trying to get a simple HTML form to look like this: .

Basically, it's a form with three input fields and one submit button.

Regarding the input fields, there are two on top and one below. I'd like these to be perfectly centre-aligned with each other and the second one to stretch to be the same width as the ones above.

Regarding the submit button, I'd like it to be perfectly center-aligned, both horizontally and vertically, with the input fields, but be to the right of these.

I'm not too worried about it not being fully cross-browser.

Thanks for any pointers!

Edit: I'd prefer if it were done with CSS rather than be table-based. (I hear table-based is just plain evil.)

Solution 1

How about something like this with pure CSS? By the way... do you know specific dimensions regarding your input fields and the search button? I could probably do this 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;
}

I hope this helps.

Solution 2

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

Comments

[KJYe.Name]

holy troll face migrated from reddit to SO ;O

[Fran Verona]

A few days I posted a link to an excellent tutorial to center divs horizontal and vertically. Maybe it can help you too, but with your inputs, labels, etc. Here it is: stackoverflow.com/questions/5282758/…

[Fran Verona]

Tables, at least to me, isn't the best choice. A few links about it: webdesign.about.com/od/layout/a/aa111102a.htm phrogz.net/css/WhyTablesAreBadForLayout.html

[Humphrey Bogart]

Very true, tables solve this problem perfectly (if only CSS were that simple, at least for me!). However, I'd prefer if it were done with CSS.

[Todd]

Agreed. Even with forms I tend to stay away from them, unless there is a design issue like this...then its just simpler to go table. Admittedly, I feel a little dirty doing it... :)

[Humphrey Bogart]

Absolute hero. The top fields are to accommodate around 20 characters and the bottom one double that.

[Hristo]

haha ok. well what i've given you is plenty of width. but you can additionally specify the size attribute of the <input> fields which controls the width of the input field in terms of how many characters are visible... I think :)

[Hristo]

So did this answer your question?

[Nguai al]

In my setting, div didn't work. i had to settle with table method. it works beautifully.