Piemērs 1. Noteikta platuma slāņi
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Slāņi pa horizontāli</title>
<style type="text/css">
#layer1 {
background-color: #fc0; /* Slāņa fona krāsa */
border: 1px solid #000; /* Rāmja parametri */
padding: 5px; /* Atkāpes ap tekstu */
float: left; /* Piekļaušanās labajai malai */
width: 200px; /* Slāņa platums */
}
#layer2 {
background-color: #c0c0c0; /* Slāņa fona krāsa */
border: 1px solid #000; /* Rāmja parametri */
padding: 5px; /* Atkāpes ap tekstu */
width: 300px; /* Slāņa platums */
float: left; /* Piekļaušanās labajai malai */
}
.clear {
clear: both; /* Piekļaušanās atcelšana */
}
</style>
</head>
<body>
<div id="layer1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
</div>
<div id="layer2">
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi.
</div>
<div class="clear"></div>
<p>Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat.</p>
</body>
</html>
Piemēra rezultāts.
Šis piemērs būs derīgs slāņiem, kuru platums būs norādīts tieši pikseļos vai procentos ar parametru width. Lai piekļaušanās neizplatītos tālāk uz citiem elementiem, jāizmanto atribūts clear, tas atceļ darbību float. Piemērā tam tiek izmantots tukšs slānis <div class="clear"></div>.
Piebilde
Pie pārlūka loga izmēra maiņām, šādā metodē izkārtoti slāņi vairs nenovietojas blakus, bet sāk "pārlēkt" uz leju, viens zem otra. Lai tas nenotiktu, izmantojiet stila atribūtu min-width.
