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.)

Answer 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.