HTML <a> tag pushes elements down the page when using position: relative

Question

I have a form with a style input field and a tag <a>that acts as a form submit button. I do not want the button of the real form, because I will execute AJAX in this form.

Here's the markup:

<form action="" method="post">
    <input type="text" id="videoLink" />
    <a href="#" class="formSubmit">Go</a>
</form>
<div class="contentTop"></div>
<div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque suscipit nisi at elit elementum vitae condimentum felis aliquam. Aliquam vitae orci quis odio semper rhoncus id ut leo. Nullam laoreet semper tortor, vitae viverra est aliquam eu.</p>
</div>
<div class="contentBottom"></div>

And this is the style applied to the corresponding markup:

#videoLink {
    background: url('images/inputBackground.png') no-repeat;
    width: 641px;
    height: 29px;
    border: none;
    padding: 5px 10px 5px 10px;
    font-size: 1.2em;
}

.formSubmit {
    display: block;
    text-indent: -9999px;
    background: url('images/formSubmit.png') no-repeat;
    width: 65px;
    height: 30px;
    position: relative;
    top: -35px;
    right: -590px;
    outline: none;
}

.formSubmit:hover {
    background: url('images/formSubmitHover.png') no-repeat;
}

.formSubmit:active {
    background: url('images/formSubmitPressed.png') no-repeat;
}

The fact is that I am doing this:

http://imgur.com/OUT3v.jpg

And I do not know a good solution. I need this gap where the button layout should go. When I tried to apply position: absoluteto the element .formSubmit, it aligns it in the upper left corner of the window, which will ruin it in different resolutions. I also tried to do the above using position: relative, applied to the form, but it just did the same.

Any help is appreciated, thanks.

Answer 1

: , . "display: block", . , :

: http://jsfiddle.net/xf2U4/

Answer 2

, , , position: relative , . position: absolute; margin , .

javascript , .

:

http://jsfiddle.net/73MTd/

:

http://jsfiddle.net/YM9SB/

Answer 3

Nevermind, I managed to fix it myself.

I put another DIV in my form called alignerand then set it to position: relative, and then I was able to use it correctly position: absolutein the element <a>.

Thanks to everyone.