JSFiddle

  • test-1-style-clues

    No-Library (pure JS), HTML, CSS, JavaScript

    <article>
        <p>
            Gör det du kan först.
        </p>
        <p>
            Artikeln är 400 pixlar bred.
        </p>
        <p>
            Färgen bakom texten är #cccccc om inget annat sägs.
            Färgen ...</p></article>
  • test-1-style-facit

    No-Library (pure JS), HTML, CSS, JavaScript

    <article>
        <p>
            Gör det du kan först.
        </p>
        <p>
            Artikeln är 400 pixlar bred.
        </p>
        <p>
            Färgen bakom texten är #cccccc om inget annat sägs.
            Färgen ...</p></article>
  • test-1-style #249 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    <article>
      <p>
        Gör det du kan först.
      </p>
      <p>
        Artikeln är 400 pixlar bred.
      </p>
      <p>
        Färgen bakom texten är #cccccc om inget annat sägs. Färgen ...</p></article>
  • clearfix #51 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    <!-- div för att göra clearfix -->
    <div class = 'wrapper'>
        <p class='left'>
            Detta kan vara en bild som flyter bredvid texten.
        </p>
        <p>
            Detta är en text som ska ligga runt bilden.
        </p>
        <p>
            Detta är ...</p></div></!-->
  • display - inline - block #13 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
    <span>6</span>
    <span>6</span>
    <span>7</span>
    
    
    
  • float #22 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    
    <p>Träutensilierna i ett tryckeri äro ingalunda en faktor där trevnadens ordningens och ekonomiens ...</p>
  • sidlayout - simple - margin float 3 col % #9 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    <header>&lt;header&gt;</header>
    <aside class="left">&lt;aside&gt;</aside>
    <aside class="right">&lt;aside&gt;</aside>
    <article>&lt;article&gt;</article>
    <footer>&lt;footer&gt;</footer>
  • sidlayout - simple - margin float 3 col

    No-Library (pure JS), HTML, CSS, JavaScript

    <header>&lt;header&gt;</header>
    <!-- <section class="clearfix"> -->
    <aside class="left">&lt;aside&gt;</aside>
    <aside class="right">&lt;aside&gt;</aside>
    <article>&lt;article&gt;</article>
    <!-- </section> -->
    <footer>&lt;footer&gt;</footer>
  • sidlayout - simple - float left #57 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    <header>&lt;header&gt;</header>
    <section class="clearfix">
    <aside>&lt;aside&gt;</aside>
    <article>&lt;article&gt;</article>
    <aside>&lt;aside&gt;</aside>
    </section>
    <footer>&lt;footer&gt;</footer>
  • sidlayout - bas

    No-Library (pure JS), HTML, CSS, JavaScript

    <header>&lt;header&gt;</header>
    <aside>&lt;aside&gt;</aside>
    <article>&lt;article&gt;</article>
    <aside>&lt;aside&gt;</aside>
    <footer>&lt;footer&gt;</footer>