microCSS

Esempi di layout ottenibili con microCSS:
Example layouts with microCSS

Questa pagina usa un layout fluido. Provare a ridimensionare la finestra del browser.
This page use a fluid layout. Try to resize the browser's window.

2 colonne — 2 columns

<div class="wrap">
  <div class="right75"><p>uno</p></div>
  <div class="left25"><p>due</p></div>
</div>

3 colonne — 3 columns

(la centrale è il doppio delle altre ed è la prima nel sorgente)
(central column is double of the others and is the first in the source)

<div class="wrap">
  <div class="left75">
    <div class="right66"><p>uno</p></div>
    <div class="left33"><p>due</p></div>
  </div>
  <div class="right25"><p>tre</p></div>
</div>

3 colonne uguali — 3 columns equal width

<div class="wrap">
  <div class="left66">
    <div class="left50"><p>uno</p></div>
    <div class="right50"><p>due</p></div>
  </div>
  <div class="right33"><p>tre</p></div>
</div>

4 colonne uguali — 4 columns equal width

<div class="wrap">
  <div class="left50">
    <div class="left50"><p>uno</p></div>
    <div class="right50"><p>due</p></div>
  </div>
  <div class="right50">
    <div class="left50"><p>tre</p></div>
    <div class="right50"><p>quattro</p></div>
  </div>
</div>

4 colonne — 4 columns

(una è il doppio delle altre 3)
(one is double width of the others)

<div class="wrap">
  <div class="left80">
    <div class="left75">
      <div class="right66"><p>uno</p></div>
      <div class="left33"><p>due</p></div>
    </div>
    <div class="right25"><p>tre</p></div>
  </div>
  <div class="right20"><p>quattro</p></div>
</div>

L'ultimo esempio 4 colonne visualizzato per evidenziare l'annidamento delle classi
The last 4 columns example visualized to hilight the class nesting

5 colonne — 5 columns

<div class="wrap">
  <div class="left66">
    <div class="left66">
      <div class="left50"><p>uno</p></div>
      <div class="right50"><p>due</p></div>
    </div>
    <div class="right33"><p>tre</p></div>
  </div>
  <div class="right33">
    <div class="left50"><p>quattro</p></div>
    <div class="right50"><p>cinque</p></div>
  </div>
</diV>