Spalten mit CSS

Mein alter Artikel "Webseiten sind keine Gemälde"

by Jens Grochtdreis

HTML

<div class="ym-wrapper">
    <div class="ym-wbox">
        <div class="header">
            <img src="http://lorempixel.com/1200/200" alt="">
        </div>
        <div class="columncontainer">
            	<h2>Webseiten sind keine Gemälde</h2>

            <p>HTML wurde entwickelt, um Texte zu strukturieren. Mithilfe der Tags zeichnet
                man Strukturelemente einer Seite aus, nicht das Layout. Tags umschließen
                (im Normalfall) Seitenteile und geben den Browsern so den Hinweis, um welches
                Strukturelement einer Seite es sich hierbei handelt. Auf diese Weise erkennen
                Browser (und Suchmaschinen!) Überschriften, Absätze, Listen, Bilder und
                Tabellen.</p>
            <p>Die visuelle Präsentation erledigen hingegen Stylesheets (CSS). Solche
                Stilvorlagen kennt man auch bei Freehand, QuarkXPress oder Word (Formatvorlagen).
                Diese theoretische und klare Aufteilung hapert in der Realität an den Browsern.
                Insbesondere in den Kindertagen des Web ging die CSS-Unterstützung in den
                Browsern kaum über die Einfärbung von Texten hinaus.</p>
            <p>Mit der Kommerzialisierung des Web wurden Wege gesucht, interessante Layouts
                zu erstellen und Unterhaltung statt Information zu verbreiten. Tabellen
                wurden zu Layoutzwecken missbraucht und Schriften wurden direkt per HTML
                (&lt;font&gt;) definiert. Man lehnte sich damit stark dem Printdesign an,
                was nur natürlich war, schließlich kannten die Designer nichts anderes.
                Mit der Veröffentlichung von XHTML im Jahr 2000 versuchte das W3C, den
                Focus wieder stärker auf die Trennung von inhaltlicher Struktur und Layout
                zu setzen.</p>
            <p>Aber, einmal gelernt tun sich die meisten Designer und Webentwickler heute
                schwer damit, sich vom Tabellenlayout zu lösen. Die...

CSS

.ym-wbox {
    max-width: 1200px;
    margin: 0 auto;
}
.footer {
    border-top: 5px solid #a20000;
    padding: 10px;
    margin-top: 10px;
}
.header {
    border-bottom: 5px solid #a20000;
    margin-bottom: 10px;
}
img {
    width: auto;
    height: auto;
    max-width: 100%;
}
.columncontainer {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    -ms-column-count: 3;
    -o-column-count: 3;
    column-count: 3;
    -webkit-column-gap: 5%;
    -moz-column-gap: 5%;
    -ms-column-gap: 5%;
    -o-column-gap: 5%;
    column-gap: 5%;

    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #a20000;    
}

.columncontainer:last-of-type {
    border-bottom: none;
}