DokuWiki

Informationen zu HTHL und CSS sind unter http://www.yaml.de/de/dokumentation/anwendung/subtemplates.html zu finden

Für 2 Spalten (z.B. 50% / 50%):

<!-- Subtemplate: 2 Spalten mit 50/50 Teilung --> 
<div class="subcolumns">
  <div class="c50l">
    <div class="subcl">
      <!-- Inhalt linker Block -->
    </div>
  </div>

  <div class="c50r">
    <div class="subcr">
      <!-- Inhalt rechter Block -->
    </div>
  </div>
</div>

und für drei Spalten (z,B. 33% / 33% / 33%):

<!-- Subtemplate: 3 Spalten mit 33/33/33 Teilung -->
<div class="subcolumns">
  <div class="c33l">
    <div class="subcl">
      <!-- Inhalt linker Block -->
    </div>
  </div>

  <div class="c33l">
    <div class="subc">
      <!-- Inhalt mittlerer (linker) Block -->
    </div>
  </div>

  <div class="c33r">
    <div class="subcr">
      <!-- Inhalt rechter Block -->
    </div>
  </div>
</div> 

Die möglichen Spaltenteilungen dem CSS entnehmen (Summe immer 100 … logisch) <note important>Wichtig: Damit der Ausgleich von Rundungsfehlern fehlerfrei funktioniert, muss sich innerhalb eines Subtemplates immer exakt ein rechts-floatender Container befinden.</note>

@media all
{
 /**
  * @section subtemplates
  * @see     http://www.yaml.de/de/dokumentation/anwendung/subtemplates.html
  */
  .subcolumns { display:table; width:100%; table-layout:fixed; }
  .subcolumns_oldgecko { width: 100%; float:left; }

  .c20l, .c25l, .c33l, .c40l, .c38l, .c50l, .c60l, .c62l, .c66l, .c75l, .c80l { float:left; }
  .c20r, .c25r, .c33r, .c40r, .c38r, .c50r, .c60r, .c66r, .c62r, .c75r, .c80r { float:right; margin-left:-5px; }

  .c20l, .c20r { width:20%; }
  .c40l, .c40r { width:40%; }
  .c60l, .c60r { width:60%; }
  .c80l, .c80r { width:80%; }
  .c25l, .c25r { width:25%; }
  .c33l, .c33r { width:33.333%; }
  .c50l, .c50r { width:50%; }
  .c66l, .c66r { width:66.666%; }
  .c75l, .c75r { width:75%; }
  .c38l, .c38r { width:38.2%; }
  .c62l, .c62r { width:61.8%; }

  .subc  { padding:0 0.5em; }
  .subcl { padding:0 1em 0 0; }
  .subcr { padding:0 0 0 1em; }

  .equalize, .equalize .subcolumns { table-layout:fixed; }

  .equalize > div {
    display:table-cell;
    float:none; 
    margin:0; 
    overflow:hidden;
    vertical-align:top;
  }
}

@media print
{
 /**
  * (en) float clearing for subtemplates. Uses display:table to avoid bugs in FF & IE
  * (de) Float Clearing für Subtemplates. Verwendet display:table, um Darstellungsprobleme im FF & IE zu vermeiden
  */

  .subcolumns,
  .subcolumns > div {
    overflow:visible; 
    display:table;
  } 
}

Und wie üblich die IE CSS-Anpassungen: (einzubinden mit <!–[if lte IE 7]><link href=“LinkzurPatchDatei.css” rel=“stylesheet” type=“text/css” /><![endif]–>)

@media screen, projection
{
  /**
   * (en) IE-Adjustments for subtemplates
   * (de) IE-Anpassung für Subtemplates
   *
   * Doubled Float-Margin Bug
   * @see        http://positioniseverything.net/explorer/doubled-margin.html
   *
   * @bugfix
   * @affected   IE 5.x/Win, IE6
   * @css-for    IE 5.x/Win, IE6, IE7
   * @valid      yes
   */

  .c20l, .c25l, .c33l, .c38l, .c40l, .c50l, .c60l, .c62l, .c66l, .c75l, .c80l,
  .c20r, .c25r, .c33r, .c38r, .c40r, .c50r, .c60r, .c66r, .c62r, .c75r, .c80r { display:inline; }

  /* Fix for:"Linking to anchors in elements within the containing block" Problem in IE5.x & IE 6.0 */
  * html .equalize, * html .equalize .subcolumns { overflow:visible; display:block; }
  .equalize, .equalize .subcolumns { overflow:hidden; display:block; }

  /* transform CSS tables back into floats */
  .equalize .c20l,.equalize .c40l,.equalize .c60l,.equalize .c80l,
  .equalize .c25l,.equalize .c33l,.equalize .c38l,.equalize .c50l,
  .equalize .c62l,.equalize .c66l,.equalize .c75l {
    float:left; display:inline;
    padding-bottom:32767px;
    margin-bottom:-32767px;
  }
  .equalize .c20r,.equalize .c40r,.equalize .c60r,.equalize .c80r,
  .equalize .c25r,.equalize .c33r,.equalize .c38r,.equalize .c50r,
  .equalize .c62r,.equalize .c66r,.equalize .c75r {
    float:right; margin-left:-5px; display:inline;
    padding-bottom:32767px;
    margin-bottom:-32767px;
  }

  .no-ie-padding .c20l,.no-ie-padding .c40l,.no-ie-padding .c60l,.no-ie-padding .c80l,
  .no-ie-padding .c20r,.no-ie-padding .c40r,.no-ie-padding .c60r,.no-ie-padding .c80r,
  .no-ie-padding .c25l,.no-ie-padding .c33l,.no-ie-padding .c38l,.no-ie-padding .c50l,
  .no-ie-padding .c62l,.no-ie-padding .c66l,.no-ie-padding .c75l,
  .no-ie-padding .c25r,.no-ie-padding .c33r,.no-ie-padding .c38r,.no-ie-padding .c50r,
  .no-ie-padding .c62r,.no-ie-padding .c66r,.no-ie-padding .c75r {
    padding-bottom:0;
    margin-bottom:0;
  }
  
   /**
   * Internet Explorer and the Expanding Box Problem
   * @see http://www.positioniseverything.net/explorer/expandingboxbug.html
   *
   * @workaround
   * @affected   IE 5.x/Win, IE6
   * @css-for    IE 5.x/Win, IE6
   * @valid      yes
   */
  
  /* avoid growing widths */
  * html .subc,
  * html .subcl,
  * html .subcr { word-wrap:break-word; o\verflow:hidden; }
}