Folyékony oldalelrendezésnél az oszlopszélesség beállítására fix értékek helyett a befoglaló terület %-os értékét szokás megadni.
Esetünkben helyi menü a tároló div szélességének 20%-át, a tartalom pedig 80%-át foglalja el. A tartalom baloldalán 20%-os margó biztosítósítja a menüoszlop számára szükséges szabad területet.
A tartalom így mindig teljes mértékben kitölti a rendelkezésre álló területet. A helyi menü esetén azonban gyakran zavaró a szélesség változása.
1. Példa:
Forráskód
...
<style type="text/css">
...
/* Változik a Fix elrendezéshez képest */
#tarolo {width:100%;}
#tartalom {margin-left:20%; width:80%;}
#balmenu {width:20%; float:left; }
</style> ....
<body>
<div id="tarolo">
<header id="fejlec"> Webáruház neve és lógója </header>
<nav id="menu">Termékek | Vásárlás | Kapcsolatok </nav>
<div id="balmenu">
<br>
<b>Kínálat</b>
<ul>
<li>PC</li>
<li>Laptop</li>
<li>Táblagép</li>
</ul>
</div>
<div id="tartalom">
<p> Az oldal tartalma ... </p>
</div>
<footer id="lablec"> Céginfó, jogi info...</footer>
</div>
</body>
Eredmény*
Eredmény*
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ő: ketoszlopos_folyekony_webaruhaz.html