Layout tweederde eenderde testpagina

Overzicht van het element in mogelijke structuren om te testen.

Tests

div

Gegroepeerde content binnen een div met div's.

Visueel voorbeeld:

HTML-voorbeeld:

<div class="two-thirds-one-third">
  <div>
    <h2>Lorem ipsum dolor set</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.</p>
  </div>

  <div>
    <h2>Lorem ipsum dolor set</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.</p>
  </div>

  <div>
    <h2>Lorem ipsum dolor set</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.</p>
  </div>

  <div>
    <h2>Lorem ipsum dolor set</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.</p>
  </div>
</div>

div

Gegroepeerde content binnen een div met section's.

Visueel voorbeeld:

HTML-voorbeeld:

<div class="two-thirds-one-third">
  <section>
    <h2>Lorem ipsum dolor set</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.</p>
  </section>

  <section>
    <h2>Lorem ipsum dolor set</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.</p>
  </section>
</div>

span

span en p binnen tweederde eenderde uitlijning.

Visueel voorbeeld:

HTML-voorbeeld:

<div class="two-thirds-one-third">
  <span>Lorem ipsum dolor set</span>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim
    luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie
    sed, tempus in massa.
  </p>
</div>

p

Paragrafen binnen tweederde eenderde uitlijning.

Visueel voorbeeld:

HTML-voorbeeld:

<div class="two-thirds-one-third">
  <p>Lorem ipsum dolor set</p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim
    luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie
    sed, tempus in massa.
  </p>
</div>

ul

Lijst binnen tweederde eenderde uitlijning.

Visueel voorbeeld:

HTML-voorbeeld:

<div class="two-thirds-one-third">
  <ul>
    <li>Lorem ipsum</li>
    <li>Lorem ipsum</li>
    <li>Lorem ipsum</li>
    <li>Lorem ipsum</li>
    <li>Lorem ipsum</li>
  </ul>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim
    luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie
    sed, tempus in massa.
  </p>
</div>

p en ul

Lijst binnen tweederde eenderde uitlijning.

Visueel voorbeeld:

HTML-voorbeeld:

<div class="two-thirds-one-third">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim
    luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie
    sed, tempus in massa.
  </p>
  <ul>
    <li>Lorem ipsum</li>
    <li>Lorem ipsum</li>
    <li>Lorem ipsum</li>
    <li>Lorem ipsum</li>
    <li>Lorem ipsum</li>
  </ul>
</div>

div met afbeelding

Gegroepeerde content binnen een div met section's.

Visueel voorbeeld:

Lorem ipsum dolor set

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

HTML-voorbeeld:

<div class="two-thirds-one-third">
  <img src="/img/strand.jpg" alt="Foto van een strand">

  <section>
    <h2>Lorem ipsum dolor set</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.</p>
  </section>
</div>

div

Gegroepeerde content binnen een div met article's.

Visueel voorbeeld:

HTML-voorbeeld:

<div class="two-thirds-one-third">
  <div>
    <h2>Lorem ipsum dolor set</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.</p>
  </div>

  <div>
    <h2>Lorem ipsum dolor set</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.</p>
  </div>
</div>

section

Elementen uitlijnen binnen een section met div's.

Visueel voorbeeld:

HTML-voorbeeld:

<section class="two-thirds-one-third">
  <div>
    <h2>Lorem ipsum dolor set</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.</p>
  </div>

  <div>
    <h2>Lorem ipsum dolor set</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.</p>
  </div>
</section>

section

Elementen uitlijnen binnen een section met section's.

Visueel voorbeeld:

HTML-voorbeeld:

<section class="two-thirds-one-third">
  <section>
    <h2>Lorem ipsum dolor set</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.</p>
  </section>

  <section>
    <h2>Lorem ipsum dolor set</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.</p>
  </section>
</section>

section

Elementen uitlijnen binnen een section met article's.

Visueel voorbeeld:

HTML-voorbeeld:

<section class="two-thirds-one-third">
  <article class="visually-grouped">
    <h2>Lorem ipsum dolor set</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.</p>
  </article>

  <article class="visually-grouped">
    <h2>Lorem ipsum dolor set</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.</p>
  </article>
</section>

article

Elementen uitlijnen binnen een article met div's.

Visueel voorbeeld:

HTML-voorbeeld:

<article class="two-thirds-one-third">
  <div>
    <h2>Lorem ipsum dolor set</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.</p>
  </div>

  <div>
    <h2>Lorem ipsum dolor set</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.</p>
  </div>
</article>

article

Elementen uitlijnen binnen een article met section's.

Visueel voorbeeld:

HTML-voorbeeld:

<article class="two-thirds-one-third">
  <section>
    <h2>Lorem ipsum dolor set</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.</p>
  </section>

  <section>
    <h2>Lorem ipsum dolor set</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.</p>
  </section>
</article>

article

Elementen uitlijnen binnen een article met article's.

Visueel voorbeeld:

HTML-voorbeeld:

<article class="two-thirds-one-third">
  <article class="visually-grouped">
    <h2>Lorem ipsum dolor set</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.</p>
  </article>

  <article class="visually-grouped">
    <h2>Lorem ipsum dolor set</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.</p>
  </article>
</article>