molily: Flexible Box Layout

Beitrag lesen

Hallo,

Kann mir jemand einen Tip geben, wie ich <input/> dazu bekomme, den verfuegbaren Platz voll auszunutzen (width 100% funktioniert nicht wie gewuenscht)

Floats schrumpfen immer zusammen auf die Größe, die der Inhalt erfordert. width: 100% für ein Element in einem Float wird also ohne weiteres nichts tun und wird die Breite des Floats nicht verändern.

Da kannst natürlich dem Float selbst eine feste Breite geben. Das kann eine Angabe z.B. in px, em, % sein. Was du allerdings vorhast, lässt sich mit Floats nicht umsetzen. Dazu gibt es das Flexible Box Layout. Hier dein Beispiel mit Flexbox umgesetzt:

http://jsfiddle.net/nRT9c/1/

Das Problem ist, dass das der Internet Explorer erst ab der kommenden Version 10 unterstützt und Opera noch nicht. Es gibt jedoch ein JavaScript, welches die Unterstützung nachrüstet.

Mathias