Płynny szablon (ang. liquid layout) charakteryzuje się zmianą swoich poziomych proporcji przy zmianie rozmiaru okna przeglądarki lub rozdzielczości ekranu. Najczęściej w każdych warunkach zajmuje on całą dostępną szerokość w oknie. Jest on raczej rzadziej stosowany, ze względu na niemożliwe do przewidzenia ułożenie elementów treści. Poza tym tekst w zbyt długich linijkach zwykle gorzej się czyta, ponieważ trudniej przenieść wzrok z końca wiersza na początek następnego. Czasami jednak może być wygodny, np. kiedy zawiera jakieś szerokie elementy, które mogą nie zmieścić się w ustalonej szerokości dla stałego szablonu (czyli zwykle 780px minus szerokość kolumny menu i ewentualnie dodatkowych informacji).

W płynnych szablonach najczęściej tylko blok treści strony dopasowuje się do rozmiarów okna przeglądarki, a pozostałe kolumny zawsze pozostają stałe. Dla kolumny menu zmiana szerokości zwykle nie miałaby większego sensu, gdyż często zawiera ustalone wąskie elementy (odnośniki nawigacyjne). Poza tym dzięki stałej szerokości kolumny menu podanej w pikselach jej wygląd staje się niezależny od rozdzielczości ekranu, a w tym przypadku jest to mocno wskazane.

Cały czas jedynie stylizując niezmienny kod HTML przedstawiony na wstępie, sprawimy, że kolumna treści dopasuje się do rozmiarów okna przeglądarki, a więc również do rozdzielczości ekranu (wszystkie przykłady w skali 1:2, czyli dwukrotnie pomniejszone):

Dwie kolumny:

html, body {
	background-color: #fff;
	color: #000;
	margin: 0;
	padding: 0;
}

#NAGLOWEK {
	background-color: #888;
}

#MENU {
	width: 150px;
	float: left;
	overflow: hidden;
	position: relative;
	background-color: #ccc;
}

#TRESC {
	margin-left: 150px;
	background-color: #fff;
}

#STOPKA {
	clear: both;
	background-color: #888;
}

Wyjaśnienie:

1. Ustalamy kolor tła oraz tekstu dla całej strony oraz usuwamy marginesy, aby mieć większy obszar dostępny na nasz szablon.
2. Ustalamy stałą szerokość kolumny menu nawigacyjnego, aby nie rozszerzała się przy zmianie rozmiarów okna przeglądarki ani rozdzielczości ekranu. Menu nawigacyjne zwykle zawiera elementy o ustalonej szerokości, dlatego jego rozszerzanie mogłoby być niewskazane. Ustalenie oblewania (float: left) powoduje, że kolumna ustawia się po lewej stronie następnego bloku. Deklaracja pozycjonowania relatywnego (position: relative) została dodana tylko ze względu na możliwy błąd w bardzo starych przeglądarkach, który objawiał się znikaniem z ekranu oblewanego bloku menu nawigacyjnego.
3. Dla bloku treści strony tym razem nie ustalamy własności oblewania ani szerokości, dzięki czemu w miarę zmieniania rozmiarów okna przeglądarki lub rozdzielczości ekranu, szerokość tego bloku będzie się dopasowywać do nowych dostępnych rozmiarów, tak że szablon zajmie zawsze 100% szerokości okna. Na przykład przy zmaksymalizowanym oknie, w rozdzielczości 800x600 treść najprawdopodobniej przyjmie szerokość:
   800px - 20px - 150px = 630px,
   podczas gdy w rozdzielczości 1024x768:
   1024px - 20px - 150px = 854px.
4. Lewy margines bloku treści strony powinien wynosić dokładnie tyle samo co szerokość kolumny menu nawigacyjnego, ustawionej po lewej stronie. Nie spowoduje to jednak odsunięcia treści od kolumny menu o podaną wartość marginesu, ponieważ elementy oblewane (float) - w tym przypadku kolumna menu - są usuwane z normalnego biegu treści w dokumencie. Blok treści strony nie jest oblewany tak jak menu, zatem jego margines jest liczony od lewej krawędzi okna przeglądarki, a nie od prawej krawędzi kolumny menu. Margines ten jest konieczny, ponieważ bez niego, kiedy blok treści byłby wyższy od kolumny menu, dolna część tekstu znalazłaby się pod kolumną menu, przylegając do lewej krawędzi okna. Zatem margines przygotowuje miejsce na kolumnę menu, która została ustawiona dokładnie nad nim. Możliwy efekt bez lewego marginesu:
   Nagłówek szablonu

   Menu nawigacyjne

   Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony...

   Stopka serwisu
5. Stopka serwisu posiada przypisaną wartość przylegania clear: both, ponieważ w przeciwnym razie mogłaby się ustawić obok kolumny menu nawigacyjnego, które jest oblewane:
   Nagłówek szablonu

   Menu nawigacyjne

   Treść strony

   Stopka serwisu

Trzy kolumny:

html, body {
	background-color: #fff;
	color: #000;
	margin: 0;
	padding: 0;
}

#NAGLOWEK {
	background-color: #888;
}

#MENU {
	width: 150px;
	float: left;
	overflow: hidden;
	position: relative;
	background-color: #ccc;
}

#INFORMACJE {
	width: 150px;
	float: right;
	overflow: hidden;
	position: relative;
	background-color: #ccc;
}

#TRESC {
	margin-left: 150px;
	margin-right: 150px;
	background-color: #fff;
}

#STOPKA {
	clear: both;
	background-color: #888;
}

Sytuacja analogiczna jak poprzednio, jednak teraz musimy ustawić kolumnę dodatkowych informacji po prawej stronie treści strony (float: right), a co za tym idzie, blok treści posiada dodatkowy prawy margines o wartości równej szerokości prawej kolumny, czyli dodatkowych informacji.

Odwrotna kolejność:

Dwie kolumny:

html, body {
	background-color: #fff;
	color: #000;
	margin: 0;
	padding: 0;
}

#NAGLOWEK {
	background-color: #888;
}

#MENU {
	width: 150px;
	float: right;
	overflow: hidden;
	position: relative;
	background-color: #ccc;
}

#TRESC {
	margin-right: 150px;
	background-color: #fff;
}

#STOPKA {
	clear: both;
	background-color: #888;
}

Trzy kolumny:

html, body {
	background-color: #fff;
	color: #000;
	margin: 0;
	padding: 0;
}

#NAGLOWEK {
	background-color: #888;
}

#MENU {
	width: 150px;
	float: right;
	overflow: hidden;
	position: relative;
	background-color: #ccc;
}

#INFORMACJE {
	width: 150px;
	float: left;
	overflow: hidden;
	position: relative;
	background-color: #ccc;
}

#TRESC {
	margin-left: 150px;
	margin-right: 150px;
	background-color: #fff;
}

#STOPKA {
	clear: both;
	background-color: #888;
}

Jeszcze inne ustawienie:

html, body {
	background-color: #fff;
	color: #000;
	margin: 0;
	padding: 0;
}

#NAGLOWEK {
	background-color: #888;
}

#MENU {
	width: 150px;
	float: left;
	overflow: hidden;
	position: relative;
	background-color: #ccc;
}

#INFORMACJE {
	width: 150px;
	float: left;
	overflow: hidden;
	position: relative;
	background-color: #ccc;
}

#TRESC {
	margin-left: 300px;
	background-color: #fff;
}

#STOPKA {
	clear: both;
	background-color: #888;
}