Oftmals fragt man sich, wie ein Layout am besten aufgebaut sein sollte, um nicht nur den „normalen“ Besuchern der Seite sondern auch den Screenreader-Benutzern einen logischen Seitenaufbau zu präsentieren. Denn nichts ist störender, als eine endlos lange Liste von Links oder sekundären Informationen überspringen zu müssen, um zum wichtigen Inhalt zu gelangen.

Bite Size Standards hat sich diesem Thema angenommen und das Erscheinungsbild einer typischen Webseite mit CSS verändert. Das Dokument besitzt in diesem Falle 3 Bereiche, die unterschiedliche Inhalte beinhalten. Jeweils ein DIV steht für den Hauptinhalt (main), die Navigation (nav) und Links (links) zur Verfügung:

<div id="main">[...content ...]</div>
<div id="nav">[...content...]</div>
<div id="links">[...content...]</div>

Nun werden diese „Spalten“ per CSS positioniert, um ein 3-Spalten-Layout zu erhalten:

#main {
    display:inline; /* Fixes IE Double Margin Float Bug */
    float:left;
    width:50%;
    }
#nav {
    float:left;
    width:20%;
    }
#links {
    float:left;
    width:20%;
    }

Um die Navigation auf die rechte Seite zu verschieben und den Hauptinhalt in die Mitte, benutzt man die CSS-Eigenschaft margin:

#main {
    display:inline; /* Fixes IE Double Margin Float Bug */
    float:left;
    width:50%;
    margin-left:20%;
    }
#nav {
    float:left;
    width:20%;
    margin-left:-70%;
    }
#links {
    float:left;
    width:20%;
    }

Möchte man aber die optische Erscheinung ändern, und beispielsweise die Links auf der linken und die Navigationsspalte auf der rechten Seite positionieren, nutzt man den negativen Abstand nun für den Bereich „links“:

#main {
    display:inline; /* Fixes IE Double Margin Float Bug */
    float:left;
    width:50%;
    margin-left:20%;
    }
#nav {
    float:left;
    width:20%;
    }
#links {
    float:left;
    width:20%;
    margin-left:-90%;
    }

Fertig ist das neue Layout.

Dieses kleine Tutorial stammt von Bite Size Standards und ist hier zu finden: Understanding “Any order columns”