html - having problems lining up a few objects on my form -

i'm having problems getting buttons line up. here going:

this i'd them do:

here code:

  @using (html.beginform("logon2", "account", formmethod.post))   {      <div>         <fieldset>             <legend>login</legend>              <div class="editor-label">                   @html.labelfor(m => m.username)             </div>             <div class="editor-field focus">                 @html.textboxfor(m => m.username, new { @class = "generictextbox", onkeyup = "enablelogonbutton()" })                 @html.validationmessagefor(m => m.username)             </div>              <div class="editor-label">                 @html.labelfor(m => m.password)             </div>             <div class="editor-field">                 @html.passwordfor(m => m.password, new { @class = "genericpasswordbox", onkeyup = "enablelogonbutton()" })                 @html.validationmessagefor(m => m.password)             </div>           <br/>              <p>               <input type="submit" disabled="disabled" value="log on" onclick="disablesubmitbutton()"/>                       <script type="text/javascript" src="https://seal.godaddy.com/getseal?sealid=hwxeuzaboxyxknb28uedib8ufmw5ek2tywq6mxxt6q06aqalqratpbz"></script>             </p>                    <p>             if need retrieve username @html.actionlink("click here.", "forgotusername", "account")<br/>             if need reset password @html.actionlink("click here.", "forgotpassword", "account")           </p>          </fieldset>     </div> } 

i'm not sure how them show each other.

any suggestions?

give class name "get_in_middle" p tag holds both login , image. place css,

p.get_in_middle input,p.get_in_middle img{     vertical-align:middle; } 

http://jsfiddle.net/tugup/9/