CSS - Exact same height and alignment of button and input text box

Question

I need to have a button and a tex box sitting next to each other and they have to align up perfectly as if one is bigger than the other then it will be instantly noticeable.

Usually I wouldnt bother about small differences between browsers, but these two input are sitting in a very prominent position on every page and are a big feature of the site so they have to align perfectly in all major browsers and zoom levels.

Does anyone have any advice on how to achieve this.

Just as a quick example of what i am trying to achieve: the new google homepage. After starting to type the autocomplete kicks in and the search box is moved to the top with a blue button perfectly aligned to the text box. It works perfectly cross browser but its marked up in a table. Does that suggest that this may be the best way of achieving this?

Answer 1

I'd suggest trying to style the parent element of the input/button pairing (a fieldset, in my example) in order to give a common font-size, and font-family, then using em measurements for styling dimensions/padding/margins for the child elements. Ideally styling all the child elements with the same CSS.

Given the following mark-up:

<form action="#" method="post">     <fieldset>         <label for="something">A label for the text-input</label>         <input type="text" name="something" id="something" />         <button>It's a button!</button>     </fieldset> </form> 

I'd suggest something similar, but adapted to your particular design, to the following CSS:

fieldset {     font-size: 1em;     padding: 0.5em;     border-radius: 1em;     font-family: sans-serif; }  label, input, button {     font-size: inherit;     padding: 0.2em;     margin: 0.1em 0.2em;     /* the following ensures they're all using the same box-model for rendering */     -moz-box-sizing: content-box; /* or `border-box` */     -webkit-box-sizing: content-box;     box-sizing: content-box; } 

JS Fiddle demo.

---

Following the clarification that this is to replicate/reproduce the style of Google's adjoined text-input/submit button:

fieldset {     font-size: 1em;     padding: 0.5em;     border-radius: 1em;     font-family: sans-serif;     border-width: 0; }  label, input, button {     font-size: inherit;     padding: 0.3em 0.4em;     margin: 0.1em 0.2em;     -moz-box-sizing: content-box;     -webkit-box-sizing: content-box;     box-sizing: content-box;     border: 1px solid #f90;     background-color: #fff; }  input {     margin-right: 0;     border-radius: 0.6em 0 0 0.6em; } input:focus {     outline: none;     background-color: #ffa;     background-color: rgba(255,255,210,0.5); } button {     margin-left: 0;     border-radius: 0 0.6em 0.6em 0;     background-color: #aef; } button:active, button:focus {     background-color: #acf;     outline: none; } 

JS Fiddle demo.

Albeit the above works fine in Chromium 12.x and Opera 11.5 (Ubuntu 11.04), Firefox seems to show an extra pixel or two in the latter demonstration.