Csupán úsztatással ritkán alakítjuk ki egy-egy weboldal szerkezetét. Kétségtelenül egyszerű megoldás, és ezért is használtuk a HTML5 weboldalak készítése fejezetben.
Az első példa a korábban megismert állandó méretű elrendezést mutatja. A felhasználó mindig ugyanakkorában látja az oldalt függetlenül a képernyőn rendelkezésre álló helytől. Kis felbontás esetén a felhasználó szorgalmasan görgethet. Nagy felbontás esetén pedig a képernyő csupán egy részét használjuk.
Minden elem margóinak és szegélyeinek vastagsága: 0. Ha nem így lenne, akkor a magasságok szélességek méreteinek meghatározásakor ezt figyelembe kellene venni.
A második példa annyiban különbözik, hogy a baloldali menü mérete: auto. Látszik, hogy a szöveges tartalom ekkor beúszik a menü alá.
Az áttekinthetőség érdekében a példakódból kimaradt a színek, margók (0px) és szegélyek (0px) beállítása.
1. példa:
Forráskód
<style type="text/css">
body {height:400px;width:600px;
border: 1px solid #ff2210;}
#tarolo {height:400px;width:600px; }
#fejlec {height:50px; }
#menu {height:30px;text-align:center; }
#balmenu {height:290px; width:100px; float:left;}
#tartalom {height:290px; }
#lablec {height:30px;text-align:center;}
</style>
...
<body>
<div id="tarolo" >
<header id="fejlec"> Webáruház neve ...</header>
<nav id="menu">Termkek | Vásárlás... </nav>
<div id="balmenu">
<br> <b>Kínálat</b> ....
</div>
<div id="tartalom"><p> Az oldal tartalma ...
szöveg </p>
</div>
<footer id="lablec"> Céginfó, jogi ...</footer>
</div>
<body>
Eredmény*
2. példa:
Forráskód
<style type="text/css">
...
#balmenu { width:100px; float:left;}
...
</style>
Eredmény*
* Az eredmény megjelenítése az Ön által használt böngészőtől függ.
A példakód külön ablakban is megtekinthető: css_elrendezes_ketoszlopos_uszo_01.html