Form Alignment inputs - html

Question

I am having an issue with aligning my password input box so its aligned with the email address input box any ideas?
**CSS:**
.column-right-login{
background:url('../image/login.png') no-repeat;
width:335px;
height:154px;
padding: 30px 0px 0px 10px; /* top right bottom left */
}
.column-right-login input{
margin-left:15px;
}
.column-right-login a{
color:#fff;
}
HTML:
<div class="column-right-login">
<form action="http://www.thetradinghouse.co.nz/login" method="post" enctype="multipart/form-data" id="homeLogin">
<div><label for="email">Email Address: </label> <input type="text" name="email" value="" /></div>
<div><label for="password">Password: </label> <input type="password" name="password" value="" /></div>
Forgotten Password
<a onclick="$('#homeLogin').submit();" class="button"><span>Login</span></a>
</form>
<script type="text/javascript"><!--
$('#homeLogin input').keydown(function(e) {
if (e.keyCode == 13) {
$('#homeLogin').submit();
}
});
//--></script>
</div>

Answer 1

This is just one idea:
.column-right-login label{
width:150px;
display:-moz-inline-stack; /*Firefox 2 hack: must come before other declarations*/
display:inline-block;
_height:50px; /*IE 6 Hack*/
/*IE 7 Hacks*/
zoom:1;
*display:inline;
}
sample: http://jsfiddle.net/aTuFq/2/
Resources: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

Answer 2

This works, but I suggest you go read this article:
http://www.alistapart.com/articles/prettyaccessibleforms
.column-right-login{
background:url('../image/login.png') no-repeat;
width:335px;
height:154px;
padding: 30px 0px 0px 10px; /* top right bottom left */
}
form label {
float:left;
width:100px
}
.column-right-login input {
margin-left:15px;
float:left;
}
form div {
clear:both;
}
.column-right-login a {
color:#fff;
}