Mehrspaltige Inhalte bei responsive Webdesign
Inhalte auf Websites, die sich auf mehrere Spalten verteilen, gehen naturgemäß in die Breite. Eine häufig verwendete Kombination ist ein zweispaltiger Container mit Bild und umfließendem Text. Bei geringen Displaygrößen bzw. -breiten bleibt in solchen Fällen der Text solange in der zweiten Spalte, bis der Platz nicht mehr ausreicht. Ist der Platz zu gering, wird der Text an der Stelle, an der ein Wort zu lang ist, unterhalb des Bildes verschoben. Das hat den unschönen Effekt, dass der Text getrennt wird. Ein Teil des Textes ist nach wie vor neben dem Bild, ein Teil unterhalb des Bildes. Dazwischen bleibt ein großer Leerraum.
Spalten nicht "floaten"
Eine Lösung für solche Fälle kann sein, die Spalten bis zu einer gewissen Breite des sichtbaren Bereichs nicht mit anderen Elementen umfließen zu lassen (floaten). Hierfür kann man die CSS-Einstellungen auf float: none; setzen. Ein Beispielcode.
/* div.spalte1 mit float: none */
/* div.spalte2 wird dadurch unterhalb platziert */
@media only screen and (min-width:320px) {
div.spalte1 {
float: none;
}
div.spalte2 {
float: none;
}
}
/* div.spalte1 mit float: left */
/* div.spalte2 wird dadurch neben div.spalte1 platziert */
@media only screen and (min-width:768) {
div.spalte1 {
float: left;
}
div.spalte2 {
float: left;
}
}Bei dieser Lösung werden die Container div.spalte1 und div.spalte2 bis zu einer Breite von 767px nicht mit anderen Elementen umgeben und beginnen jeweils unterhalb. Erst ab einer Breite von 768px können sie nebeneinander positioniert werden.
Bedingte Trennstriche mit dem SHY-Tag einfügen
In manchen Fällen kann es passieren, dass die Texte getrennt werden, obwohl eigentlich genügend Platz für das Bild und den umfließenden Text vorhanden ist. Das kann z.B. dann der Fall sein, wenn einzelne Wörter ziemlich lang sind. Eine einfache Möglichkeit, um bei solchen Effekten Abhilfe zu schaffen, bietet der SHY-Tag. Damit werden optionale Zeilenumbrüche mit einem Trennstrich eingefügt. Ist ein Wort zu lang, wird das Wort automatisch mit einem Trennstrich umgebrochen und in der nächsten Zeile fortgeführt. So kann man Bilder mit Texten umfließen lassen, auch wenn lange Wörter vorkommen.