over deze website

Percentage is een meeteenheid relatief ten opzichte van het containing element. Het is perfect voor afbeeldingen: hier zetten we de width van de afbeelding op altijd 50% van de width van de container. Verklein je browser om te zien wat er gebeurt!

article img {
  float: right;
  width: 50%;
}
<article class="clearfix"> an image

Je kan zelfs gebruik maken van min-width en max-width om de afmetingen van de afbeelding te limiteren!

</article>

percentage width layout

Je kan percentages gebruiken voor layout, maar dit kan resulteren in meer werk. In dit voorbeeld, het nav element begint op een onvriendelijke manier te wrappen als het scherm te smal wordt. Het komt erop neer wat het beste werkt voor de content die erin komt.

nav {
  float: left;
  width: 25%;
}
section {
  margin-left: 25%;
}
<div class="container">
<section>

Als deze layout te smal wordt, zal het nav element geplet worden. Erger nog, je kunt geen min-width gebruiken om de nav te fixen omdat de rechter kolom het niet zal respecteren.

</section>
<section>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.

</section>