Vloeiende lay-out

Een vloeiende lay-out is een type ontwerp van een webpagina waarbij de lay-out van de pagina wordt aangepast wanneer de grootte van het venster verandert. Dit wordt bereikt door gebieden van de pagina te definiëren met percentages in plaats van vaste pixelbreedtes.

De meeste lay-outs van webpagina's bevatten één, twee of drie kolommen. In de begintijd van webontwerp, toen de meeste gebruikers vergelijkbare schermformaten hadden, gaven webontwikkelaars de kolommen vaste breedtes. Een vaste lay-out kan bijvoorbeeld een hoofdgedeelte van 960px breed bevatten met drie kolommen met breedtes van 180px, 600px en 180px. Hoewel deze lay-out er op een scherm van 1024x768 misschien goed uitziet, kan deze er op een scherm van 1920x1080 klein uitzien en past deze niet op een scherm van 800x600.

Vloeiende lay-outs lossen dit probleem op door percentages te gebruiken om elk gebied van de lay-out te definiëren. In plaats van een inhoudsgebied van 960px te maken, kan een webontwikkelaar bijvoorbeeld een lay-out maken die 80% van het scherm vult, waarbij de drie kolommen respectievelijk 18%, 64% en 18% innemen. Door percentages te gebruiken, kan de inhoud worden vergroot of verkleind zodat deze in het venster van de computer van de gebruiker past. De CSS die wordt gebruikt om een vaste lay-out tegenover een vloeiende lay-out te maken, wordt hieronder weergegeven.

De CSS-klassen in de voorbeelden kunnen elk worden toegewezen aan een div binnen de HTML van een pagina, waarbij de klassen .left, .right en .middle binnen de klasse .content vallen. De klasse content kan ook aan een tabel worden toegewezen en de andere klassen kunnen aan tabelcellen worden toegewezen. Voor de klasse .content met een vaste breedte hoeft geen breedte te worden gedefinieerd, omdat deze automatisch de breedte van de ingesloten divs of tabelcellen beslaat.

Vloeiende lay-out versus responsief ontwerp

De termen "vloeiende lay-out" en "responsief webontwerp" worden soms door elkaar gebruikt, maar het zijn twee verschillende dingen. Een pagina die is gemaakt met responsief webontwerp bevat CSS-mediaquery's, die verschillende stijlen laden afhankelijk van de breedte van het venster of het type apparaat waarmee de pagina wordt geopend. Voor responsief webontwerp is meer CSS nodig dan voor een eenvoudige vloeiende lay-out en soms ook (JavaScript), maar het biedt ook meer controle over de lay-out van de pagina.