Layout2 - CSS Datei

Die meisten CSS-Eigenschaften wurden bereits bei Layout 1 beschrieben. Bei Layout 2 sind die Inhalte mit den Boxen und der Footerbereich ganz anders gebaut. Sie unterteilen sich jeweils in drei Boxen oder Spalten. Um solche Elemente nebeneinander darzustellen und bei responsivem Design reagieren zu können, sind verschiedene Startegien denkbar. Die Frage lautet: Floats, Inline Block or Display Table? Or Flexbox? (Artikel englisch)

Floats "float:left;" die oft verwendete Lösung

Vorteil: hat bereits so was wie "Tradition", häufig verwendet
Vorteil: Float-Fehler sind bekannt und gut dokumentiert
Nachteil: sie müssen mit "clear" aufgehoben werden
Viele "Floats" nach rechts oder links bedingen viele "Clears".
Nachteil: Keine vertikale Zentrierung
Nachteil: Keine einheitliche Höhe
Verwendung: Grosse Layoutblöcke mit verschiedenem Inhalt

Inline Block

Vorteil: vertikale Zentrierung
Vorteil: müssen nicht aufgehoben (clear) werden
Vorteil: verschiedene Haltepunkte bei ResponsivDesign können durch einfach Breitenangabe gesetzt werden
Vorteil: Aussenabstand (margin) kann verwendet werden
Nachteil: Je nach Inhalt kann ein Element falsch umbrechen (inherent withespace / WhiteSpaceBug oder Kommentare)
Nachteil: Keine einheitliche Höhe
Verwendung: Bei der Verwendung von Listen

Display Table

Vorteil: vertikale Zentrierung und gleiche Höhen
Vorteil: Wenn sich das Layout wie eine Tabelle verhalten soll
Nachteil: Verschiedene Abstände können Fehler verursachen
Nachteil: Box-Eigenschaften (margin, padding, border) können stören
Nachteil: Viele (Tabellen typische)-Attribute, table-column-group, table-row, table-caption usw. können das Layout sehr komplex oder Fehleranfällig werden lassen.
Nachteil: Abstände müssen im "table-Element" mit "border-spacing" erzeugt werden, nicht im "table-cell"-Element, sind daher immer gleichmässig
Verwendung: Layouts mit "Tabellen-Groove".

Flexbox oder display:flex;

Vorteil: Scheint alles zu bieten was mit Floats/Inline-Block/Display-Table zu erreichen ist: Vertikal- und horizontale Ausrichtung, unterschiedliche Grössen und Abstände usw.
Nachteil: Sehr unterschiedliche Interpretation und Schreibweise für die verschiedenen Browser
Verwendung: Hoffnungsträger der CSS Layout-Gemeinde, wenn es denn soweit ist ...

Layout mit Boxen und Spalten

Ein einfaches Layout mit "display_table", "border-spacing" und "dispaly:table-cell" muss für den Test unseres HTML-Codes reichen.

Mehrspaltiger Text

article p.spalte2 {
    -webkit-column-count: 2; 
    -webkit-column-gap: 6%; 
    -webkit-column-width: 47%;
    -moz-column-count: 2; 
    -moz-column-gap: 6%; 
    -moz-column-width: 47%;
}

Mehrspaltiger Text kann mit "column-width" (Breite), "column-count" (Spaltenanzahl) und "column-gap" (Spaltenabstand) erstellt werden. Im Beispiel für die Browser -webkit- (Chrome, Safari) und -moz- (Firefox).

Drei Boxen

section.boxes {
    display:table;
    border-spacing:6px 0px;
    margin:20px;
}
div.boxcontainer {
    min-height:200px;
    background-color: #fff;
    border: 2px solid #ccc;
    border-radius: 12px;
    
}
div.box1, div.box2, div.box3 {
    width:33.333%;
    display:table-cell;
}
div.boxcontainer h3.box {color: #900;}
div.boxcontainer p.box {color: #999;}

Die "section.boxes" ist der umfassende Container, er enthällt "display:table;" und das "spacing" für die Aussenabstände der Boxen. Die zwei Klassenbezeichnungen der einzelnen Boxen: ".boxcontainer" gibt allen Farbe, Rand und abgerundete Ecken. Um die Boxen individuell anzusprechen können ".box1, .box2, .box3" verwendet werden. Da alle die gleiche Breite besitzen, sind "width:33%;", zudem erzeugt die Eigenschaft "display:Table-cell;" ein Tabellen ähnliches verhalten.

Drei Spalten im Footer

footer {
    width:100%;
    min-height:100px;
    clear:both;
    border-top:1px solid black;
    display:table;
}
footer div.spalte3 {
    width:33.333%;
    display:table-cell;
}
footer div.spalte3 ul {
    list-style-type: none;
    float:right;
}

Das Footer-Element enthält "display:table;", die drei Spalten eine Breite "width:33.333%;" und "display:table-cell;". Die Social-Media-Links sind kleine Ikonen die in einer rechts ausgerichteten Liste in der dritten Spalte platziert sind.

Layout 2 und die CSS-Datei: layout2.html - layout2.css