[CSS] Positionierung wie in einer Tabelle

[Ambience]

Hallo, ich habe folgende Elemente:

Code: Alles auswählen

<div id="box">
   <div>Name: <input type="text" size="20" maxlength="40" id="login" /></div>
   <div>Password: <input type="text" size="20" maxlength="40" id="login" /></div>
   <div>Bildercode: <input type="text" size="20" maxlength="40" id="login" /></div>
   </div>

Die Input-Felder sollen nun so angeordnet werden, dass diese untereinander genau positioniert sind, als wären das ganze eine Tabelle.

Code: Alles auswählen

#box  { border-top: 2px solid #ffffff;
        border-bottom: 1px solid #ffffff;
        width: 400px;
      }
      
#login  { border: 2px solid #6293c1; 
        }

Ich hatte dies mit: #login {position:absolute; right: 20px;} versucht, aber das funktioniert nicht, so wies sein soll....

Weiß jemand rat?

Vielen Dank!

[S2B]

Ich denke mal, dass du sowas meinst:

Code: Alles auswählen

<dl class="field">
   <dt><label for="name">Name:</label></dt>
   <dd><input type="input" name="name" id="name" /></dd>
</dl>

Code: Alles auswählen

dl.field {
   clear: left;
}

dl.field dt {
   float: left;
   width: 30%;
}

dl.field dd {
   margin-left: 30%;
}

Wahrscheinlich musst du vorher noch die Standard-Styles von <dl> zurücksetzen (margin: 0; padding: 0).

[Ambience]

Hi, erstmal danke für die antwort...

alleinstehend funktioniert es, aber wenn ich 3 felder mache funktioniert es nicht:

Code: Alles auswählen

<dl>
   <dt><label for="name">Name:</label></dt>
   <dd><input type="input" name="name" /></dd>
   </dl>
   <dl>
   <dt><label for="password">Passwort:</label></dt>
   <dd><input type="input" name="password" /></dd>
   </dl>
   <dl>
   <dt><label for="captcha">Bildercode:</label></dt>
   <dd><input type="input" name="captcha" /></dd>
   </dl>

edit: ah, hab: class="field" vergessen... funktioniert TOP...

Danke dir