nicht angemeldet
Hallo,
Das Problem kann ich im IE, aber auch in Chrome und Firefox nachvollziehen. Das Verhalten erscheint mir auch völlig logisch.
input-Elemente haben standardmäßig eine border. Die ist im Allgemeinen dem Browser überlassen, üblicherweise ist sie 2px groß. Wenn du sie beim Fokus auf 1px setzt, so wird das ganze floatende Elemente um 2px schmaler. Das nächste floatende Element rutscht also nach oben, wird unter dem zweiten und neben dem ersten angezeigt.
Float: left/right hat eigentlich nichts mit festem Spaltenlayout zu tun, man missbraucht diese Technik nur dafür, weil es lange keine bessere gab. Elemente mit float: left/right werden soweit oben wie möglich dargestellt und stapeln sich vertikal sowie horizontal in Float-Richtung. Wenn viele aufeinander folgende Elemente floaten und eine unterschiedliche Höhe haben, landen die Boxen oftmals, wo sie nicht landen sollen, und es entstehen unschöne Lücken.
Du solltest beim Fokus also keine CSS-Eigenschaft ändern, die die letztliche Höhe des floatenden Elemente ändert. Definiere z.B. für den Normal-Status eine border (1px solid black oder so etwas). Dann ändert sich beim Fokus nur noch die Farbe, aber nicht die Höhe und damit das ganze Layout. Oder setzte eine großzügige min-height für die floatenden Elemente, die gegenüber Höhenänderungen der Inhalte tolerant ist.
Eine Alternative zu float in solchen Fällen ist übrigens display: inline-block. Es sorgt für eine Anordnung in Zeilen, anstatt dass Boxen so hoch wie möglich gezogen werden.
Mathias