KOD HTML:

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"/>
<style type="text/css">  
		 /* początek def CSS */
         /* { margin: 0px; padding: 0px;} */ /* zerowanie styli */
         div {overflow: hidden; padding: 25px; }
         /* overflow: hidden --> ukrywanie tekstu wychodzącego poza granice elementu */
         /* padding: 25px; --> Margines wewnętrzny określa odstęp pomiędzy początkiem elementu, a jego trzecią. tutaj 25 pikseli */
         #ramka { /* definicja elementu ID o nazwie ramka*/
         margin-right: auto; /* auto --> przeglądarka internetowa sama określi rozmiar prawego zewnętrznego marginesu */
         margin-left: auto;
         min-width: 400px; /* minimalna szer strony  > 400pikseli */
         max_width: 900px; /* maksymalna szer strony > 900 pikseli */
}
#naglowek {
		 background-color: 	#87CEEB;
         /* kolor tła w HEX na 	#87CEEB; */
         font-size:16pt;
         /* wielkość czcionki na 16 punktów */
         color:red;
         /* Kolor czerwony */
         font-family: Arial;
         /* rodzina czcionki - Arial */
         font-style: italic;
         /* styl czcionki - Italic */
         text-align: center;
         /* miejsce tekstu, środek */
         font-weight:bold;
         /* czcionka tekstu powinna posiadać grubość większą od elementu rodzica. */
}
#stopka {
		 background-color: 	#7FFFD4;
         font-size:16pt; 
         color:blue;
         font-family: Arial;
         font-style: italic;
         clear:both;
         /* clear-przyleganie elementów, both - oba */
}
		 .kolumny { /* Klasa uniwersalna - wszystkie elementy klasy przed kropką będą miały dane właściwości przypisane niżej)*/
         margin-top: 10px; /*  rozmiar górnego zewnętrznego marginesu, 10 pikseli */
         margin-right: 2%; /*  rozmiar prawego zewnętrznego marginesu, 2% */
         margin-bottom: 2%; /* rozmiar dolnego zewnętrznego marginesu, 2% */
         margin-left: 10px; /* rozmiar lewego zewnętrznego marginesu, 10 pikseli*/
         background-color: 	#1E90FF;
}
#kol1 {
		 float: left; /* Z left właściwości float możemy sprawić, że dany element stanie się pływającym */
         width:100px;
         background-color: #008080;
}
#kol2 {
		 color: green;
         font-size: 0.7cm;
         background-color: #4682B4;
}
		 /*Szablon pływający - Przy zmianie szerokości okna przeglądarki zmieniać się będzie szerokość kolumn.  */
#menu_prawe_jajdyk {
         float: right;
         width:100px;
         font-size: 0.5cm;
         color: red;
         background-color: #00CED1; 
}
		 </style>
</head>
<body>
<div id="ramka">
<div id="naglowek">Nagłówek mojej strony </div>
<div class="kolumny" id="kol1"><p>Menu</p> </div>
<div class="kolumny" id="kol2"><p>Szablon pływający (płynny szablon)
Przy zmianie szerokości okna przeglądarki zmieniać się będzie szerokość kolumn. Najczęściej zmiana szerokości dotyczy tylko wybranych kolumn np. kolumna menu pozostaje niezmieniona, pozostałe kolumny zmieniają się płynnie w stosunku do szerokości okna.</p><img src="jajdyk_100procent.png"><img src="jajdyk_50procent.png"></div>
<div class="kolumny" id="menu_prawe_jajdyk"><p>Menu</p> </div>
<div id="stopka">Pracę wykonał nieznany woluntariusz</div>
</div>
<div id="prv_main_link"><a href="https://www.prv.pl" title="darmowy hosting">Darmowy hosting</a> zapewnia PRV.PL</div><script type="text/javascript" src="/prv_site_config_values.js"></script><script type="text/javascript" src="//hostinga.htw.pl/prv_hosting_footer.js"></script></body>
</html>