In der Standardeinstellung verpackt Zend_Form Eingabefelder und ihre Beschriftungen in einer HTML-Definitionsliste. Ob das nun semantisch ist oder nicht, darüber kann man sich so trefflich streiten wie darüber, was der bessere Editor oder das bessere Betriebssystem ist. Viel interessanter ist die Frage, wie man die DT und DD Elemente so mit CSS formatiert, dass dabei ein zweispaltiges Formular herauskommt.

Der erste Versuch ist klassisch: das dt mit der Beschriftung bekommt eine Breite und ein float verpasst, das bekommt dd "zur Sicherheit" noch einen Rand, der der Breite des dt entspricht.

dt {
  float:left;
  width:120px;
}

Die meisten Tutorials im Netz hören an dieser Stelle auf, übersehen aber ein Problem - Beschriftungen, die über mehrere Zeilen gehen. Dann sieht das Formular plötzlich so aus:

Heute habe ich mich so lange durch Suchergebnisse geklickt, bis ich die Lösung gefunden hatte. Das dd Element wird ebenfalls gefloatet, wird mit einer Breite versehen und das dt bekommt die Eigenschaft clear:left, damit jede Beschriftung in einer neuen Zeile anfängt.

dt {
  float:left;
  clear:left
  width:120px;
}
 
dd {
  float:left;
  width:200px;
}

So sieht das Formular in Firefox und Safari mit diesen Eigenschaften aus:

Internet Explorer 6 mag anscheinend das clear:left nicht, aber auch dem Monster aus Redmond kann geholfen werden: Wenn die Breite des umgebende dl Elements genau der Gesamtbreite von dt und dd entspricht wird, dann bricht auch der antike Browser korrekt um. Internet Explorer 7 leider nicht, der braucht noch folgenden bedingten Kommentar:

<!--[if IE 7]> 
<style type="text/css">
dd { float:none; }
</style>
 <![endif]-->

Der fertige Stil sieht so aus:

dt {
  float:left;
  clear:left
  width:120px;
  margin:0.25em 0;
}
 
dd {
  width:200px;
  float:left;
  margin:0.25em 0;
}
 
dl {
  width:320px;
  overflow:hidden;
}

Wenn diese Formatierung in meiner Anwendung häufig auftaucht, jedoch mit unterschiedlichen Spaltenbreiten, dann habe ich ziemlich viel Tipparbeit vor mir. Die kann ich mir erleichtern, indem ich die das Ruby-Tool SASS oder seine PHP-Portierung verwende. Diese Art CSS zu schreiben ermöglicht es, sich Makros zu definieren, die dann von SASS zu CSS kompiliert werden. Diese Makros heißen Mixins und können sogar mit Parametern versehen werden und die Summe meiner Spaltenbreiten berechnen. Das hier ist mein neues Mixin für Formulare in Definitionslisten:

@mixin form_dl_floated($labelwidth: 120px, $fieldwidth: 200px) {
  dt {
    float:left;
    clear:left
    width:$labelwidth;
    margin:0.25em 0;
  }
 
  dd {
    width:$fieldwidth;
    float:left;
    margin:0.25em 0;
  }
 
  dl {
    width:$labelwidth + $fieldwidth;
    overflow:hidden;
  }
}
 
/* Anwendungsbeispiel mit eigener Breite fuer Beschriftung */
 
#mein_formular {
  @include form_dl_floated(150px);
}