Folyékony kétoszlopos oldal

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*

* 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