Question

I am having a ridiculous problem where my input text field and submit buttons are not lining up and I really can’t figure out an elegant solution of how to fix it. As you can see in the image below, the input text field (labeled “Enter Keywords” in the upper right”) is 2px higher than the “Search” submit button:

Here is the HTML:

<div id="search">
    <form action="#" method="POST" id="search_form">
        <div id="search_inputs">
            <input type="text" placeholder="Enter Keywords" name="keywords" />
            <input class="button" type="submit" name="search" value="SEARCH" />
        </div>
    </form>
</div>

Here is the css code:

#search_form .button {
    background: black;
    color: white;
    padding: 3px 15px;
    border: none;
    font-size: 7pt;
    height: 18px;
}

#search_form input[name="keywords"] {
    width: 175px;
}

#search {
    margin-top: 7px;
    float: right;
}

I’m pretty sure setting the font-size to 7pt is messing it up, but I’m not sure why and I don’t know how to deal with this because that’s the font size of my other buttons in the area.

Thanks for any help!

Answer 1

adding a float: left; to the #search_form input[name="keywords"] style align’s their tops correctly, then adding some margin-right should get you good to go.

Fiddle

The issue stems from the float: right on the search button. The input box has a natural display: inline-block to it, which causes the slight drop. Normally when you float right the fix to this is to move that element upwards in the DOM. This won’t work in this case. By changing the input to a floated element you are also forcing it to be display: inline.

Though I’m not sure why you can’t just add a display: inline to the element.