How to make text input line up with button in IE7?

I'm trying to get an <input /> to line up correctly next to a <button> in IE7.

Ideally, the rendered HTML should appear as: (or similar)

but instead it's appearing as

This is an example of the HTML/CSS I'm using: http://jsfiddle.net/wLpQg/1/

Note how the textbox appears on a different line to the button. This works correctly in all browsers except IE7 (and maybe IE6, but I haven't checked that!)

How can I get this to appear on the same line as the butt开发者_运维知识库on, preferably as similarly to the first image as possible?

---

float in the input box to the left, and float button to the right. Then add margins until they're lined up correctly.

---

If you want the <input> and <button> to always exist on the line below, the easiest way to do this is wrap them in a container, for example:

<div class="search">
    <input type="text" watermarktext="Enter share class name or partial name" value="" name="Search" id="Search" class="search-input watermarkOn">    
    <button id="btnViewResults" type="submit" class="linkButton medium submit"><span><span id="resultCount">View 27090 matches</span></span>
    </button>
</div>

with the associated CSS:

.search {
    position:relative;
    padding:16px 0;
}

.search button {
    position:absolute;
    right:12px;
}

I ended up commenting out a lot of the CSS in your example, since the container now takes care of the padding and positioning. I forked your fiddle into a new demo to demonstrate. This is working for me in IE6/IE7/IE8 and Chrome 14.