Wie man Formulare heutzutage layoutet (nämlich mit CSS und nicht etwa Tabellen), verzapfen unzählige Artikel im Netz. Einen sauberen Einstieg bietet beispielsweise Quirksmodes Tableless forms.

Auch hier wird wieder belohnt, wer die HTML-Spezifikationen kennt und spezifische Tags so einsetzt, für was sie eigentlich erdacht wurden. Bestes Beispiel in diesem Zusammenhang: Der <label>-Tag, welcher immer noch nicht allen professionellen Web-Entwicklern bekannt ist.

Eine Sache wird in vielen Artikeln hingegen nicht ausreichend erläutert: Wie kriege ich das Formular-Layout hin, ohne dabei <br>-Tags zu benutzen? (Zeilenumbrüche, für HTML-Unerfahrene – in der Regel <tt clear="all">, um mit dem Floats zurecht zu kommen …)

Heute nun habe ich mich noch einmal mit der Umbruch-Thematik auseinandergesetzt und kann folgende Lösung präsentieren, die zumindest in Firefox 2.x und Safari 3.x zu funktionieren scheint (ich schliesse mich Conrast.ie an und hasse MSIE6 ab heute öffentlich):

label {
 display:block;
 float:left;
 width:200px;
 
 clear:left;
}
input {
 display:block;
 float:left;
 
 clear:right;
}

Wichtig sind die clear-Anweisungen, die das Umbrechen der Floats steuern.