Abszolút poícionálású 2 oszlopos honlap

Kétoszlopos abszolút pozicionálású honlap esetén a bal oldali oszlop szélességét kell csupán megadni. A jobboldali automatikusan kitölti a rendelkezésre álló területet. Természetesen a tartalomterület és a fejléc, valamint menüsor szélességének megadásával csökkenthetjük a megjelenítésre használt területet.

Az elrendezés előnye az úsztatással szemben, hogy a bal oldali kevésbé fontos tartalom töltődik be utoljára.

Vegyük észre, hogy a HTML kódban a bal oldali menü és a tartalom kódja felcserélődött.

Változó méretű abszolút pozicionálású div jobb oldalára nem kerülhet, mert a változó méretű div a hosszú tartalom esetén a következő div alá kerül. A harmadik div-et a másodikban elhelyezett jobbra úsztatott elemmel lehet megvalósítani.

Abszolút pozicionálásnál a lábléc elhelyezéséhez (második példa) fix pozicionálást kell használni. Ekkor viszont ügyeljünk arra, hogy a tartalomterület alsó margója (ha kevés a tartalom, akkor a baloldali oszlopé is) magasabb legyen a lábléc magasságánál.

1. példa:

Forráskód


<style type="text/css">  
 { margin:0; padding:0;}
  #tarolo {position:relative; display:block; 
        min-height:100%; width: 100%; }
  #fejlec {position:absolute; display:block; top: 0; left:0;  
        height:50px; width: 100%;  }
  #menu {position:absolute; display:block; top: 50px; left:0;  
        height:30px; width: 100%; text-align:center; }
  #balmenu {position:absolute; display:block; top: 80px; left:0;  
        height:290px;  width:100px; }
  #tartalom {position:absolute; display:block; top:80px; left:100px;}
</style>   
...
<body>
  <div id="tarolo" >        
     <header id="fejlec"> Webáruház neve ...</header>
     <nav id="menu">Termkek | Vásárlás... </nav> 
     <div id="tartalom"><p> Az oldal tartalma ...
         szöveg  </p>     
     </div>
     <div id="balmenu"> 
       <br> <b>Kínálat</b> ....
     </div> 
   </div>
<body>

Eredmény*

2. példa:

Forráskód


<style type="text/css">  
...
#lablec {position:fixed; bottom:0; display:block; 
          height:30px; width: 100%;}
#tartalom {... padding-bottom:40px; } 
...
</style>   
<body>
....
<div id="lablec"> Céginfó, jogi információk</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ő: css_elrendezes_ketoszlopos_abszolut_fix_02.html