Mit Spaltenansichten lassen sich Elemente wie z.B. Text oder Formulare nebeneinander anordnen. Dabei Klammert man die bereiche mit {{{%%}}} und der spezialformatierung scol, mcol oder lcol. Der Prefix S, M, und L steht dabei für die Breite der Spalte ([[KleidergrößenAnalogie]]). So können sie eine Schmale spalte (scol) mit einer Großen spalte kombinieren (lcol) oder zwei gleichgroße spalten nebeneinander schreiben. Ein {{%%clear}} sorgt für einen "Zeilenumbruch", so dass sie Daten sogar tabellarisch anordnen können

== Beispiel

{{{
%%mcol
Bereich Links Oben
%%

%%mcol
Bereich Rechts Oben
%%

%%clear
%%

%%mcol
Bereich Links Unten
%%

%%mcol
Bereich Rechts Unten
%%

%%clear
%%
}}}

Und so siehts aus:

%%mcol
Bereich Links Oben
%%

%%mcol
Bereich Rechts Oben
%%

%%clear
%%

%%mcol
Bereich Links Unten
%%

%%mcol
Bereich Rechts Unten
%%

%%clear
%%

== Bitte Beachten

Vergessen sie niemals den abschließenden Clear!. Der Clear ist als "Zeilenumbruch" zu verstehen. D.h. sie können mehrere Spalten aneinanderreihen, dies ergibt eine "Zeile", mit einem "Clear" fangen sie eine neue Zeile an. Allerdings sollten sie auch wenn sie nur eine Zeile verwenden, mit clear abschließen, sonst werden evtl. Elemente des Templates, wie z.B. die Editierleiste verschoben!

{{{
%%mcol
linke Spalte
|=H1|=H2|=H3|
|1|2|3|
|1|2|3|
%%

%%mcol
Rechte Spalte
Diagramm
%%

%%clear
%%
}}}


Im folgenden ist Beispielcode für CSS gezeigt, der ihnen verdeutlicht, wie sie über ein Eigenen Template diese Größen auch an ihre wünsche anpassen können, denken sie aber immer daran letztendlich eine [[DeklarativeFormatierung]] zu verwenden, vermixen sie nicht layout mit content!


{{{

div.col {
	float: left;
	clear: none;
	width: 37%; 
	border-style: solid;
	border-width: 0px;
	border-color: #A8A8A8;
	padding: 4px;
	margin-left: 4px;
	margin-bottom: 4px;
}

div.mcol {
        float: left;
        clear: none;
        width: 37%;
        border-style: solid;
        border-width: 1px;
        border-color: #A8A8A8;
        padding: 4px;
        margin-left: 4px;
        margin-bottom: 4px;
}

div.scol {
        float: left;
        clear: none;
        width: 25%;
        border-style: solid;
        border-width: 1px;
        border-color: #A8A8A8;
        padding: 4px;
        margin-left: 4px;
        margin-bottom: 4px;
}

div.lcol {
        float: left;
        clear: none;
        width: 50%;
        border-style: solid;
        border-width: 1px;
        border-color: #A8A8A8;
        padding: 4px;
        margin-left: 4px;
        margin-bottom: 4px;
}

div.clear {
	clear: left;
}
}}}