float zerschießt mir mein Layout

[Der Martin]

Hi Benedikt,

vielen Dank erstmal für deine Anmerkungen. Ganz im Klaren über position:relative bin ich mir nicht, ...

ganz kurz zusammengefasst: Das betroffene Element wird relativ zu der Position, die es normalerweise hätte, verschoben, aber der Platz, den es ursprünglich eingenommen hätte, bleibt trotzdem reserviert.

Mein primäres Ziel ist eben, dass der Fragebogen in einem zweispaltigen Layout ist, weil sich dann bei jeder Frage die positiven und negativen Aspekte gegenüberstehen.

Das mit dem zweispaltigen Layout hatte ich schon verstanden; inhaltlich habe ich es nicht so genau angesehen, um jetzt positive und negative Aspekte zu erkennen; ist aber auch egal.

Wenn du jetzt sagst, dass ich  grundsätzlich die falsche Variante gewählt habe, so ist das für mich natürlich zunächst einmal schlecht weil die ganze Arbeit bisher umsonst war. Aber dennoch bin ich dir dafür dankbar.

Nein, sowas mit float zu realisieren ist nicht falsch. Aber komplizierter als nötig und mit einigen Fallstricken. Und umsonst? Nein, der Umbau ist gar nicht mal so aufwendig.

Könntest du mir dann, vlt an einem kleinen Beispiel, zeigen wie ich es besser machen könnte?

Ja. Allerdings will ich dabei auch zeigen, wie man das Markup (HTML) aussagekräftiger und semantisch besser machen kann. Und übersichtlicher noch dazu. Und du wirst feststellen, dass ein div-Element nur noch in Ausnahmefällen auftaucht. ;-)

<form action="fragebogen/auswertung.php" method="post">  
  
<!-- Echte Überschriften anstatt neutraler div-Blöcke -->  
<h1>Erleben und Warnehmen von Natur und Landschaft</h1>  
<h2>Feldprotokoll zur Bewertung von Flüssen - Bächen</h2>  
  
<!-- fieldset als Block zum Gruppieren von Formularelementen, jedem Formularelement sein label -->  
<fieldset>  
 <label>Naturräumliche Einheit:  <input type="text" name="natureinheit" size="30" /></label>  
 <label>Name des Fließgewässers: <input type="text" name="fliessname" size="30"  /></label>  
 <label>Kartierabschnitt:        <input type="text" name="kabschnitt" size="30" /></label>  
 <label>TK-Blatt:                <input type="text" name="tkblatt" size="10" /></label>  
</fieldset  
  
<fieldset>  
 <label>Bearbeiter/in: <input type="text" name"bearbeiter" size="30" /></label>  
 <!-- type="date" ist nur in HTML 5 definiert, nicht in XHTML 1 -->  
 <label>Datum:         <input type="text" name="datum" size="12" /> </label>  
 <!-- values für die option-Elemente ergänzt -->  
 <label>Uferseite:     <select name="uferseite" size="1">  
                        <option value="" >Bitte wählen</option>  
                        <option value="L">linke Uferseite</option>  
                        <option value="R">rechte Uferseite</option>  
                       </select>  
</fieldset  
  
<!-- Nächster Hauptblock -->  
<h1>Allgemeine Angaben</h1>  
  
 ...

Soweit das Markup. Dir fällt sicher auf, dass ich alle Elemente und Attribute, die nur der Darstellung dienen, entfernt habe, weil ich die Darstellung ausschließlich mit CSS regeln will.

h1  
 { ...  
 }  
  
h2  
 { ...  
 }  
  
fieldset  
 { display:   inline-block;  
   width:     48%;  
   min-width: 20em;  
   padding:   0 0.5%;  
   border:    none;          /* fieldset hat einen Rahmen als Default */  
 }  
label  
 { display: block;  
   font-weight: bold;        /* das ersetzt dein b-Element */  
   margin-bottom: 1em;       /* und das die br-Elemente */  
 }  
label input, label select  
 { display: block;           /* damit die inputs in ihrer eigenen Zeile stehen */  
 }

Das soll mal als Inspiration genügen; ist nicht in allen Punkten ausgereift. Ganz ähnlich wie beim Floating rutschen auch die inline-block-Elemente untereinander, wenn das Browserfenster die Mindestbreite (hier 20em pro Box) unterschreitet.
Die Verwendung von label-Elementen hat übrigens -außer der besseren Semantik- auch den Vorteil, dass man nicht unbedingt das Eingabefeld anklicken muss, sondern stattdessen auch auf die Beschriftung klicken kann. Das ist besonders bei Radiobuttons und Checkboxen ein Plus an Komfort.

So long,
 Martin