In dieser Rubrik werde ich künftig das ein oder andere Tutorial zu Themen veröffentlichen, welche öfter mal nachgefragt werden. Im ersten CSS-Basics-Tutorial zeige ich, wie ihr drei gleichgroße Elemente nebeneinander mit einer Breite von 100% anordnet.
Um den Schwierigkeitsgrad noch etwas zu steigern, zeige ich auch Möglichkeiten auf, wie dies mit Elementen, für welche ein Außenabstand definiert ist, funktioniert.
Okay, fangen wir an. Wir haben drei identische Elemente:
<div class="box">Blablablub</div> <div class="box">Blublubla</div> <div class="box">Blablubla</div>
Diese haben wir wie folgt definiert:
.box { padding: 20px; background: #eee; }
Als Ergebnis bekommen wir dies:
Um die Elemente nun nebeneinander anzuordnen, müssen wir sie floaten, also den Textfluß verändern. Wir ergänzen dazu folgendes:
.box { float: left; padding: 20px; background: #eee; }
und die Elemente sind so angeordnet, wie wir es wollen:
Unser Ziel ist es, die Elemente auf eine Breite von 100% zu verteilen. Die einfachste Möglichkeit: wir geben jedem Element eine feste Breite:
.box { float: left; width: 33.33333%; padding: 20px; background: #eee; box-sizing: border-box; }
und hätten so nahezu 100%. Damit der Innenabstand (padding
) keine Auswirkungen auf die Größe der Elemente hat, haben wir noch box-sizing
hinzugefügt.
So weit so einfach. Das funktioniert perfekt für Elemente ohne Hintergrundfarbe oder Außenabstand.
Wenn wir aber Elemente mit einem Hintergrund haben, möchten wir aus optischen Gründen vermutlich auch einen gleichmäßigen Außenabstand zwischen den Elementen.
Dazu könnten wir jedem Element eine Breite von 30% und einen Außenabstand von 3.33333% nach rechts geben:
.box { float: left; width: 30%; margin-right: 3.33333%; padding: 20px; background: #eee; box-sizing: border-box; }
Damit wären wir zwar bei 100% Breite, allerdings erhält auch das letzte Element einen Außenabstand nach rechts:
Um den Außenabstand vom letzten Element zu entfernen, hätte ich zwei Lösungen parat.
Wir könnten jedem der drei Elemente eine separate Klasse zuweisen:
.box1, .box2, .box3 { float: left; width: 32%; margin-right: 2%; padding: 20px; background: #eee; box-sizing: border-box; }
und den Außenabstand für das dritte Element abweichend festlegen:
.box3 { margin-right: 0; }
Ihr seht, wir haben den Außenabstand des letzten Elements bereits in die Breite und den Außenabstand der anderen beiden Element eingerechnet. Wenn ich richtig gerechnet haben, kommen wir so auf die volle Breite.
Natürlich nicht vergessen die Elemente im Quelltext entsprechend anzupassen:
<div class="box1">Blablablub</div> <div class="box2">Blublubla</div> <div class="box3">Blablubla</div>
Zweite Möglichkeit: wir bedienen uns des Pseudoelements :last-child
und sprechen damit gezielt das letzte Element an. Dazu definieren wir:
für alle Elemente:
.box { float: left; width: 32%; margin-right: 2%; padding: 20px; background: #eee; box-sizing: border-box; }
und speziell für das letzte (dritte) Element:
.box:last-child { margin-right: 0; }
Das perfekte Ergebnis:
Bleibt dran. Bald gibt’s weitere Basics.
Hallo Olli,
ich habe gerade mal Dein super hilfreiches Tutorial, allerdings mit nur 2 Boxen, nachgebaut. Klappt soweit auch super bei mir. Allerdings das box-sizing: border-box; wird bei mir vom Firefox (lt. Firebug wird es gar nicht angezeigt) ignoriert. Bei Safari geht es wunderbar. Hast Du eine Idee woran das liegen könnte?
Gruß
Ronald
Hab es jetzt mit -moz-box-sizing:border-box; gelöst.
Gruß
Ronald
Hallo Olli
Ich bin in HTML und CSS Anfänger mit erweiterten Grundkenntnissen, um es mal so zu sagen. Ich benötige als Startseite für unseren Webbrowser im Büro eine einfach index.html, auf der je 3 Boxen neben- und untereinander sind. (In diese Boxen kommen wechselnde Infos rein, aber das tut hier nichts zur Sache.) Mit deiner Anleitung kriege ich das prima hin, aber wenn ich die Boxen mit unterschiedlich langem Inhalt fülle, zerreisst es mir das Layout. Gibt es eine Möglichkeit, Boxen unterschiedlicher Höhe neben- und untereinander zu stellen, sodass jeweils die Oberkante der Boxen bündig sind?
Oder behelfe ich mich da besser mit einer Tabelle? Es ist ja keine Website, die online geht, sondern wie gesagt nur für internen Gebrauch.
Wäre schön, wenn Du mir da einen Tipp geben könntest.
Danke und Gruss, Dominik
Hallo Dominik,
die einfachste Möglichkeit ist allen Boxen eine feste Höhe zu geben. Falls das nicht gewünscht ist, wäre das noch relativ junge Flexbox-Modell für dein Vorhaben prädestiniert.
Gruß Olli
Hey Oliver,
dein Artikel hat mir sehr weitergeholfen. Habe es mit 4 Boxen umgesetzt. Aber hättest Du noch einen Tipp wie ich es unten anordnen kann. Bzw habe ich ein Hintergrundbild und er setzt mir die Boxen automatisch oben nebenenander hin. Ich möchte da aber auch einen gewissen Abstand haben und darüber quasi noch das Bild sehen. Ich hoffe das war in etwa verständlich.
lg
Andy
Hallo Andy,
wenn ich dich richtig verstanden habe, willst du zum oberen Rand des Elternelements einen Abstand. Dann kannst du entweder dem Elternelement einen Innenabstand oben (
padding-top
) verpassen oder den vier Boxen einen Außenabstand nach oben (margin-top
).Gruß Olli
Moin moin,
ich habe leider keine Kenntniss von CSS und dergleichen und versuch mich grad mit WordPress.
Leider klappt das mit den Boxen bei mir nicht so wirklich.
Ich habe im WordPress aus den Widgets das Text/html Feld genommen und in die Seite eingefügt.
Zwei der Boxen aus Deinem Beispiel werden angezeigt, die dritte nicht.
Hab schon versucht, an der Breite der Box zu ändern bzw die Breite der Webseite. Bekomme immer nur 2 Boxen. Was muss ich denn als dic class angeben für die dritte? box:last-child? Oder muss ich erst Box1 angeben, dann die box: last- child?
Danke für Deine Hilfe.
Liebe Grüße,
Daniel
Hallo Olli.
Klappt bei mir ganz gut. Ich hätte da noch eine Frage. ich hab jetzt diverse Boxen gebastelt, welche über die gesamte breite verteilt sind. wenn ich das Browserfenster ein wenig kleiner mache, wird die äussere Box automatisch nach unten transformiert. Was muss ich machen, dass die Boxen einen Fixen standtort haben und es keine Rolle spielt wie gross mein Browserfenster ist.
Anfängerfrage ich weiss. Aber finde irgendwie die Antwort nicht.
Hi!
Wie macht man das ganze, wenn man mehrere Blöcke mit Texten darin anordnen will? Das ganze soll eine Art Pinnwand sein, wo viele kurze Texte angezeigt werden, die dann jeweils mehrzeilig werden.
Sowohl mit float: left, als auch mit display: inline-block rutschen die Texte alle einzeilig untereinander. Gibt es da eine Lösung?
Danke schon im Voraus,
Asqiir
Wo genau muss der Code eingefügt werden, damit die Veränderungen auf die Links Wirkung zeigen ?
Ich habe mehrere verlinkte Fotos, die ich auf einer Word Press Seite nebeneinander anordnen möchte. Muss der Befehl „.box“ vor oder nach den Links eingefügt werden, oder für jeden Link extra ?
moi hab da mal eine frage.
ich habe 24 blöcke und möchte je reihe 6 blöcke angeordnet haben. what should i do?
Hallo,
ich möchte gerne zwei Widget Boxen von WordPress nebeneinander angezeigt bekommen und habe das mit dem angegebenen css code versucht, aber leider werden die boxen nicht nebeneinander angezeigt.
Hier ein Link zu dem Screenshot:
http://www.deutsches-team.de/css_problem.jpg
Vielen Dank
Zwar gibt es das Tutorial schon lange, aber ein kleiner Fehler ist mir bei bei Copy und Paste aufgefallen: es fehlt ein Komma zwischen .box2 und .box3
Grüße Mathias
Danke, Mathias. Ist geändert.
Super! Vielen Dank! Das war genau das letzte bißchen CSS-Programmierung, dass ich noch brauchte um meine Webseite für die Ansicht auf Mobiltelefonen zu optimieren.