Elastic of liquid layout met doorlopende kolommen

De blauwe achtergrondkleur komt van hetzelfde achtergrondplaatje als de rode kleur van de linkerkolom.

Werkwijze

Een eenvoudige oplossing om te simuleren dat alle kolommen doorlopen tot aan beneden toe is deze, waarbij gebruik wordt gemaakt van één achtergrondplaatje van 3000x1 pixel groot waarvan de linkerhelft rood is en de rechterhelft blauw. De wrapper krijgt deze als achtergond. De linkerhelft van het plaatje is rood en de rechterhelft is blauw. Zolang het browservenster niet breder is dan 3000 pixels werkt dit feilloos.

Gele achtergrond

De gele achtergrond van #kolmidden is een background-color. Deze is dus niet afkomstig van de achtergondafbeelding van #wrapper.

Layout

De layout is verder exact hetzelfde als de structuur van de basisopstelling van oefening 9.1 uit het boek.

Tip afkomstig van Alex Pot van Zinrijk

WaalWeb Webdesign | Tips bij Zelfstudiehandboek Websites Ontwikkelen