How to align these two buttons, when on exists outside the context of the <form />?

I have a <form /> with a text box, and an <input /> button.

an example can be seen here: http://jsfiddle.net/94sJa/

I'd like to have another button to the right of the first button, but outside the context of the form. Its sole purpose is to reload the page, so it doesn't need to be in the form. Plus, I don't want to submit a search query when the user clicks Reset, as would be the case when they click Search.

Is there an easy way for me to align the two buttons?

for the sake of it, the HTML and CSS are here also:

<div class="layout-fund-search-groupfactsheet">

    <form method="get" action="/uk/groupfactsheet/schroders">
        开发者_StackOverflow中文版<input type="text" value="" name="Search" id="Search" />

        <input type="submit" class="button-medium" value="Search" />
    </form>

    <input type="submit" class="button-medium" value="Reset" />
</div>

.layout-fund-search-groupfactsheet
{
    padding: 10px 20px;

    border: 1px solid #E7DFD0;

    height: 20px;    
}

.layout-fund-search-groupfactsheet input[type=text]
{
    width: 300px;
}

If you just need to reload the page with that button, you can well put it INSIDE the form and it would not make any problem. Just don't add a name attribute to that reload button.

The actual reloading would be done by javascript (I guess), so no problem. Like this:

<form method="get" action="/uk/groupfactsheet/schroders">
        <input type="text" value="" name="Search" id="Search" />

        <input type="submit" class="button-medium" value="Search" />
        <input type="button" class="button-medium" value="Reset"
                               onclick="window.location.reload()" />
</form>

Working fiddle: http://jsfiddle.net/fthAS/

put the second button within the form but change its type to "reset"

.layout-fund-search-groupfactsheet form {display: inline}

You might need to set the width of some elements to make it look good cross-browser but is this what you're looking for? Changed nothing in the HTML, except adding a class to the reset button.

http://jsfiddle.net/94sJa/2/

I've found the best way to handle this kind of thing is to style a link to look like a submit button, that way your markup would change to this:

<div class="layout-fund-search-groupfactsheet">
    <form method="get" action="/uk/groupfactsheet/schroders">
        <fieldset><!-- Your Markup is invalid without this or at least a div -->
            <input type="text" value="" name="Search" id="Search" />
            <input type="submit" class="button-medium" value="Search" />
            <a href="#" class="button-medium">Reset</a>
        </fieldset>
    </form>
</div>  

/* CSS */
input.button-medium { display:inline-block; /* your styles */}
a.button-medium { /* styled to look like your button */}

If display:inline-block; doesn't play with your current styles, you can easily add floats to the above context.

place the form in a div and float it left place the reset button in its own div and also float left.

<div class="layout-fund-search-groupfactsheet">
    <form  style="float:left;" method="get" action="/uk/groupfactsheet/schroders">
        <input type="text" value="" name="Search" id="Search" />

        <input type="submit" class="button-medium" value="Search" />
    </form>
    <input style="float:left;" type="submit" class="button-medium" value="Reset" />
</div>   

I know inline style is ugly but Im using to save my lazyness

Just like to give thanks to stephen for pointing out my fail.