Man nehme ein CSS Framework, z.B. „Skeleton“. In die entsprechenden div Container setzt man die erforderlichen Marker. Soweit kein Problem. Interessant wird es, wenn man im Inhaltsbereich je nach redaktioneller Lust und Laune eine oder zwei Spalten hat und diese sich in das floatende Layout einpassen sollen.

Die Anforderungen sind folgende: der Inhaltsbereich soll einen gewissen Abstand nach rechts haben, sofern kein Inhalt in der rechten Spalte vorhanden ist. Wenn doch, sollen beide Spalten nebeneinander und bei kleineren Bildschirmen – wie beim „responsive“ Ansatz üblich – untereinander stehen.
Man muss also die Inhaltsspalte mit unterschiedlichen divs versehen, je nachdem, ob die rechte Spalte gefüllt ist oder nicht. Das CSS der Inhaltsspalte, sofern keine rechte Spalte vorhanden ist, könnte so aussehen:

/* sofern keine rechte Spalte vorhanden ist */
#content-norightcontent {
  margin-right:20%;
}

In diesem Fall braucht man keine width Angabe, da der Container nicht floaten muss. Lediglich das margin-right wird gesetzt, so dass die Zeilen nicht zu lang werden. Wie gesagt befindet sich der Marker für den gesamten Inhaltsbereich ja bereits innerhalb des Skeleton Grids.

Kommt nun ein Inhalt in der rechten Spalte dazu, so müssen andere Angaben her. Der Inhalt braucht eine width Angabe, um floaten zu können, so dass beide Spalten nebeneinander stehen.

/* sofern eine rechte Spalte vorhanden ist */
#content {
  width: 460px;
  float:left;
  margin-right:20px;
}

Das bedeutet, dass der Inhaltsblock unterschiedliche divs benötigt, je nachdem, ob die rechte Spalte gefüllt ist oder nicht. Mit folgendem Typoscript ist das möglich:

contentmarker = COA
contentmarker.10 = COA
contentmarker.10 {
  if.isTrue.numRows < styles.content.getRight
  10 < styles.content.get
  10.wrap = <div id="content">|</div>
}
contentmarker.20 = COA
contentmarker.20 {
  if.isFalse.numRows < styles.content.getRight
  10 < styles.content.get
  10.wrap = <div id="content-norightcontent">|</div>
}

Die rechte Spalte wird mit folgendem Code gewrapt:

contentmarkerright < styles.content.getRight
contentmarkerright {
  stdWrap.required = 1
  stdWrap.wrap = <div id="contentright">|</div>
}

Was die CSS Formatierung für die beiden divs angeht, so kann man sich an den entsprechenden Angaben in der CSS Datei des „Skeleton“ Frameworks orientieren. In diesem Fall würde sich die zentrale und rechte Spalte analog zum „Skeleton“ Grid wie .eight.columns (#content) bzw. .five.columns (#contentright) verhalten:

#content {
  width: 460px;
  float:left;
  margin-right:10px;
}
#contentright {
  width: 280px;
  float:left;
}

und, um „Responsiveness“ zu gewährleisten, fügt man – entsprechend zum „Skeleton“ – folgendes hinzu:

@media only screen and (max-width: 959px) {
  #content {
    width: 360px;
    margin-right:20px;
  }
  #contentright {
    width: 200px;
  }
}
@media only screen and (max-width: 767px) {
  #content {
    width: 420px;
    margin-right:0px;
  }
  #contentright {
    width: 420px;
  }
}
@media only screen and (max-width: 479px) {
  #content {
    width: 300px;
  }
  #contentright {
    width: 300px;
  }
}

Link: Skeleton CSS Framework