Lorem Ipsum

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse a nisl. Nullam mollis odio id dolor. In nec mauris sed leo semper sollicitudin. Maecenas eget leo in eros convallis mattis. Nulla in arcu. Nullam sed lorem rhoncus tellus ornare hendrerit. Nunc placerat lorem nec leo. Curabitur arcu neque, molestie eu, aliquet et, volutpat quis, leo. Donec egestas velit a sem. Ut congue laoreet orci. In enim metus, varius ac, vulputate id, consequat non, nulla. Nulla ullamcorper ultricies eros. Duis rhoncus enim ut nulla. Quisque in nisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed adipiscing posuere odio. Nulla sodales orci eget enim.

4.3 Zweispalten-Layout mit grafikfreien Spaltentrennern

Ein großer Vorteil von float-Umgebungen ist ihr dynamischer Charakter beim Rendern der Webseite. Es bedarf daher nur minimaler Änderungen am Stylesheet, um aus einem Drei-Spalten- ein Zwei-Spalten-Layout zu erstellen.

Die erforderlichen Änderungen für diese Variante stehen in der Datei basemod_2col_left_vlines.css im Verzeichnis css/modifications. Diese Datei enthält nur die drei für das 2-Spalten-Layout erforderlichen Anweisungen. Sie wird daher zusätzlich zur basemod.css in das zentrale Stylesheet css/layout_2col_left_vlines.css eingebunden.

 /* 2-Spalten-Layout mit linkem Float und Hauptteil
          */

          

          #col2 { display:none; }

          #col2_content { display:none; }

          #col3 { margin-right:0; border-right:0; }

Die rechte Spalte #col2 und deren Inhalt #col2_content werden abgeschaltet. Mit dem dritten Befehl wird der rechte Rand der mittleren Spalte #col3 angepasst. Damit ist das 2-Spalten-Layout fertig.

Zusätzlich wird in diesem Beispiel eine 2 Pixel breite Punktlinie als vertikaler Spaltentrenner eingefügt. Dies geschieht, wie bereits im Abschnitt 4.2: Gestaltungsmöglichkeiten der Spalten beschrieben, mittels der border-Definition für #col3.

»»» Abschnitt 4.4: 2 Spalten (Variante 2)

Lorem Ipsum

Duis ac augue. Nunc quis leo. Cras accumsan vestibulum augue. Integer erat arcu, ultricies placerat, tincidunt scelerisque, malesuada nec, nisi. Cras tristique eros sed turpis. Suspendisse diam diam, mattis at, sagittis nec, imperdiet et, urna. Curabitur lacinia augue non tortor. Nulla sagittis posuere metus. Nam mattis lobortis velit. Sed ante sem, molestie sed, ultrices non, vulputate et, elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus elit nunc, ullamcorper vitae, imperdiet id, porta ac, nisi. Nam hendrerit massa. Duis id libero. Suspendisse non risus vitae pede vestibulum varius.

Nulla aliquam. Sed enim nisi, laoreet id, scelerisque vitae, pulvinar sit amet, leo. Aenean vel sapien. Nullam blandit ipsum vel pede. Integer condimentum laoreet quam. Fusce leo nisi, convallis eget, tincidunt vitae, fringilla ac, purus. Praesent luctus porttitor sem. Ut vitae metus et sapien pulvinar vehicula. Morbi dignissim sapien. Vivamus laoreet nunc et nisl.