How to get search input and submit button to line up?

Get Started
1

Hello,
Many websites have their search input and submit lined up on the same line perfectly. In Google, in the search results page, the search input and submit button are lined up perfectly. If I explicitly give them heights, then they might line up in one browser but not in another. Are you supposed to give them heights? I have a container around the two elements. Is there a way so I can just change the container height and the input text and input button will line up according to that height?

Here’s the HTML:

          <div id="search-outer">
            <input id="search-input" type="text" name="search" /><input id="search-submit" type="submit" value="Search" />
          </div>

Here’s the CSS:

#search-outer {
  width: 600px;
  margin: 0 0 10px 0;
}

#search-input {
  margin: 0;
  width: 400px;
  font-size: 20px;
  padding: 5px;
  border: 1px solid #EEEEEE;
}

#search-submit {
  margin: 0;
  font-size: 20px;
  padding: 5px;
  border: 1px solid #EEEEEE;
}
2

Try something like

input {vertical-align: middle;}
3

Hello, that didn’t quite work. Here’s an image of what my search bar looks like:
imgur: the simple image sharer

I want to get it so the height of the button input is the same as the height of the text input. Unfortunately, I cannot get it the same across all browsers by specifying the height in px. I was wondering how other websites do it.

4

Set the border on the text input to be a bit wider. Or, try removing the border from the button. You may also want to set the line-height of both.

5

want to get it so the height of the button input is the same as the height of the text input

The text input uses the normal box model and the submit buttom uses the broken box model. Therfore you just need to make sure that your dimensions account for this.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
#form1 {
    padding:20px;
    background:#fcf;
    width:520px;
    overflow:hidden;
}
#form1 label, #form1 input {
    float:left;
    padding:0 10px 0 0;
}
#search{
    width:300px;
    height:35px;
    line-height:35px;
    background:#fff;
    border:1px solid #000;
    margin:0;
    border-right:none;
    font-weight:bold;
}
#go{
    text-transform:uppercase;
    width:50px;
    height:37px;
    line-height:27px;
    background:#fcc;
    border:1px solid #000;
    margin:0;
    text-align:center;
}
#form1 label {
    width:100px;
    text-align:right;
    padding:0 10px 0 0;
    line-height:37px;
    font-weight:bold;
}
</style>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
    <fieldset>
    <legend>Search</legend>
    <label for="Search">Search:</label>
    <input type="text" name="Search" id="search">
    <input type="submit" name="Go" id="go" value="Go">
    </fieldset>
</form>
</body>
</html>

That’s pretty consistent cross browser.

6

Not sure where you are getting the idea that it is “consistent” – since that gives six different appearances in six different browsers because the MOMENT you set a height on a input, much less zero the top/bottom padding you can kiss off that element EVER rendering the same size across browsers. Especially with Opera being the only one to ‘just treat them as inline-block’ (in other words the only one that makes SENSE) while everyone else puts a random amount of padding you can’t control on them!

Which is why I’d set the borders on the text input to white, NOT set a height on it, set the line-height larger, the button larger, then wrap both inputs in an element with the background set to white. The outer element shrinks to fit FAKING the appearance of them being the same size… by making the text input the smaller of the two.

Of course Webkit puts a padding (or is it margin) around all form elements except IMG that you have no control over, so kiss off even that working.

7

That’s strange because it looks much the same in every browser I’ve got under PC and Mac. It’s probably your large fonts that are giving you differences but I can live with that.

8

Are you testing IE6 and Opera? By definition Opera is making them shorter than FF and IE since it treats them as inline-block EXACTLY, while FF adds a fixed em padding and IE adds a fixed PX padding of which the “padding” property does absolutely NOTHING to change… IE ignores height and obeys line-height, FF ignores line-height and obeys height…

Which is why I’m seeing #go around 44px tall in FF, 33px tall in IE, and the 37 you actually declared in Opera.

… and that’s WITH large fonts disabled.

Which is why I’d use this approach, which works fine.
Form Demo

Though it does have a 1px alignment issue in IE7- which is typical of trying to style form elements cross-browser.

Which is why 99% of the time people try to use these fancy formats it’s broken for me in the first place.

9

Hi Jason,

As I mentioned on all my browsers it is pretty much consistent throughout. Just to make sure it wasn’t just my system I checked on 25 more browsers via Browsercam to get a second opinion and they all show consistent throughout the PC and mac systems (almost exact in fact).

However (not to nitpick) the first three browsers I checked in your link above are broken or differ by about 4 pixels (screenshot attached).

I realise the differences are probably because of your set up with large fonts and 120dpi but I would have to argue that my example for most users will be more consistent than yours.

I think that with form controls you just gave to accept that its never going to be perfect (even if you do nothing) and depending on system or set up there will be differences.

I did like your method by the way and I have used similar when applying background images to text inputs because its a safer method to use the label to hold the image rather than the input (ie6/7 will scroll background images away in text inputs if the text overflows) .

10

Paul…thank you for the excellent solution!! Your answer really helped me… :slight_smile:

11

Just to let you know, google does it with tables. Point your firebug at the search bar and dive into the divs a bit. Bet you could do it with fewer lines of CSS too.

-Neil