Elemente ohne CSS-Floats horizontal platzieren

Boxen oder Listeneinträge lassen sich mittels CSS-Floats relativ leicht nebeneinander anordnen. Doch trotzdem führt dies in der Praxis mitunter zu Problemen. Die Eigenschaft sorgt dafür, dass die betroffenen Elemente quasi aus ihrem natürlichen Fluss gerissen werden. Danach umfließen alle anderen Elemente die Objekte, bis ein clear dem ein Ende setzt. Mir ist gestern erneut aufgefallen, wie nervig Floats sein können. Denn solche Elemente sind teilweise sehr schwer platzierbar. Daher habe ich ein wenig experimentiert und bin auf display:inline-block gestoßen. Der Effekt ist nahezu identisch, allerdings ohne die beschriebenen negativen Aspekte der Floating-Methode. Ich möchte nachfolgend den Einsatz des Display-Attributes an einem Beispiel verdeutlichen.

Inline-block als gute Alternative zu CSS-Floats

Hierzu habe ich ein einfaches Box-Modell erstellt. Drei Boxen will ich direkt nebeneinander positionieren und eine weitere ganz normal darunter. Ohne CSS-Anpassungen erscheinen sämtliche Container horizontal untereinander. Normalweise würde man nun mittels float:left die drei Boxen nach links schieben. Unter Verwendung von display:inline-block schaut das eigentlich kaum anders aus, der Elementfluss bleibt aber erhalten. Daher braucht es kein zusätzliches clear:both, da in diesem Fall ja auf Floating verzichtet wurde. Anschließend muss ich die Breite der Container festlegen. Wer mag, kann noch weitere Attribute definieren. Im Grunde sind die Boxen jetzt schon einsatzbereit.


Demo auf jsFiddle: Div-Positionierung ohne Float

Diese Methode funktioniert prima, solange die Inhalte in den Boxen gleich hoch sind. Sollte dies nicht mehr der Fall sein, verschiebt sich der Content quasi von unten nach oben. Also Text würde beispielsweise am unteren Rand des Containers stehen. Das ist natürlich etwas blöd. Float hat diese Schwierigkeiten nicht. Aber es gibt einen einfachen Trick, um die Ordnung wiederherzustellen. Entweder fügt ihr vertical-align:top an oder ersetzt inline-block durch inline-table. Dann passt die Darstellung wieder. Wie ihr merkt, ist die Funktionsweise verglichen mit Float deutlich unkomplizierter. Trotzdem müssen im Praxiseinsatz weitere Faktoren berücksichtig werden. Block-Elemente verfügen meist über eine eigene Standardformatierung. Beispielsweise müsste man Außenabstände korrigieren. Float klatscht bekanntlich alles aneinander. Ansonsten funktioniert die Methode nahezu so gut, wie CSS-Floats, nur eben angenehmer.

Was nutzt ihr lieber, CSS-Floats oder die inline-block-Variante?


Avatar von reraiseace
Autor: Markus Werner (reraiseace) Twitterreraiseace, Google+reraiseace, Twittercb_werner
Ich bin Redaktionsvolontär bei der COMPUTER BILD in Hamburg, Fernstudent am Deutschen Journalistenkolleg und schreibe auf re{raise}ace privat über Webdesign und Programmierung. Seit 2015 schrieb ich auch regelmäßig für andere Medien.

0 Kommentare

Du kannst diesen Artikel nicht mehr kommentieren.