Een van de belangrijkste zaken van webdesign is een goede lay-out. Als je een plaatje in een webpagina zet, wil je graag dat de tekst er "netjes" omheen loopt.

Hiernaast zie je een plaatje. Zoals je ziet is de tekst er netjes omheen "gevouwen".
Als je de breedte van het window kleiner maakt vloeit de tekst als het ware om het plaatje heen.
De truc is dat je het plaatje aan de linkerkant houdt. De tekst blijft rechts.

Hier staat beschreven hoe je dat aanpakt. De code staat erbij.

• De volgende code geeft het "vloei"-effect:

  <img src="esi_logo.gif" alt="Test!" width="128" height="128"
  border="0" style="float:left; margin:10px 20px 10px 0">

• Het plaatje blijft tegen de linker marge aan staan door het CSS-attribuut: float:left. Het plaatje wordt dus aan de linkerkant gehouden, de tekst vloeit er omheen.
• Er wordt wat ruimte rond het plaatje gehouden met behulp van het style-attribuut margin. Hier is gebruikt: margin:10px 20px 10px 0. De marges worden opgegeven in de volgorde top. right, bottom, left. In dit geval is er dus een marge van 10px boven en onder het plaatje en 20px rechts van het plaatje. Links is de marge nul, dus het plaatje staat tegen de linkerkant van het document.
• In plaats van float:left kun je ook float:right gebruiken. Het plaatje wordt aan de rechterkant van het document gezet. De tekst vloeit er aan de linkerkant omheen.
   
• Je kunt deze aanpak gebruiken om tekst rond elk willekeurig HTML-element te laten vloeien. Het is dus niet beperkt tot plaatjes alleen.
   
• De style-attributen kun je ook opnemen als id (dus met een #) in een style-block. Als class (dus met een .) werkt het niet!