Changing login table to tabless

HTML & CSS
1

I have a logIn table at http://dot.kr/x-test/layOut/17/logIn/?language=english&deploy=1

<table class="marginAuto">
<tr>
  <td>ID</td>
  <td class="p5"><input type="password" class="w100 b1_555"></td>
  <td rowspan="2"><input type="submit" value="logIn" class="w50 h50"></td>
</tr>
<tr>
  <td>password</td>
  <td class="p5"><input type="password" class="w100 b1_555"></td>
</tr>
<tr>
  <td colspan="3" class="bWhite alignCenter m-t5 p5 b1_555"><a href="/x-test/layOut/17/logIn/join/">join</a></td>
</tr>
<tr>
  <td colspan="3" class="h30"></td>
</tr>
</table>

I like to make it tabless.
The folloiwng code is one of my trials for it, but it seems not to work.

<div class="marginAuto">
  <span>ID</span><span><input type="password" class="w100 b1_555"></span>
</div>
<div class="marginAuto">
<span>password</span><span><input type="password" class="w100 b1_555"></span>
</div>

How can I make the same result or the similar result without table?

2

Let start by doing some markup corrections.
It should be a form not a div. I also noticed you styled the login input. :confused: 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:


<!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!