Let start by doing some markup corrections.
It should be a form not a div. I also noticed you styled the login input. :/ That causes a lot of headaches as far as cross browser comp goes. I clanged it to a button. Accomplishes the same thing, in this case, but both webkit and moz will honor its styling. after that its simple:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<title></title>
<style type="text/css">
form.marginAuto{ width:250px; margin:0 auto;}
form br {clear:left;}
.loginF label, .loginF input {float:left; margin-bottom: 10px}
.loginF input{margin-left:20px;}
.loginF label, #ID, #pass { width: 100px; }
.loginF label{ width: 50px; }
.loginF a{ display: block; padding:5px; border: 1px solid #000; text-align: center; text-decoration: none;}
#loginB{ float: right; height:50px; width:50px; margin-top: -60px}
</style>
</head>
<body>
<form class="marginAuto loginF">
<div>
<label for="ID">ID</label><input id="ID"type="password" class="w100 b1_555"><br />
<label for="pass">password </label><input id="pass" type="password" class="w100 b1_555"> <br />
<button id="loginB" type="submit" value="logIn" >Log In</button>
<a href="/x-test/layOut/17/logIn/join/">join</a>
</div>
</form>
</body>
</html>
You are floating the labels and inputs and clearing each row with the BR tag ( which has the added benefit of retaining this layout when CSS is off)
We float the submit button in the opposite direction ( right), style it and bring it to the top of the form by adding a negative top margin that is = to its height. Then we make the "join" anchor a block and style it And there you are.. no greedy!
Reply With Quote
Bookmarks