Abszolút pozíciónálású oszlopok

Két és három oszlopos elrendezés kialakítása.

Az oldal szerkezetének kialakításánál is gyakran használjuk a független (absolute) helyzetmegadást.

1. példa:

Két oszlop automatikus változó magassággal.

Forráskód

<style>
  .tarolo { height:240px;  width: 200px; position:relative;
       margin:10px; padding:0; 
       border:1px solid red;  
       background-color:yellow; color:blue;}   
  #fent {position:static; top: 0;  left: 0; 
       height:40px;  width: 200px; 
       background-color:#88ff88; }     
  #bal {position:absolute; top: 40px;  left: 0;  width: 100px; 
       background-color:#ff8888; color:#440000; } 
  #jobb { position:absolute; top:40px; right:0; width:100px;
       background-color:#8888ff;  } 
</style>     
….
<body>            
  <div class="tarolo"> 
     <div id="fent" >Felső elem tartalma... </div> 
     <div id="bal" >Baloldali elem tartalma... </div> 
     <div id="jobb">Jobboldali elem tartalma...
     Az oszlop magassága tartalomtól függően változik. 
  </div> 
</div>

Eredmény*

2. példa:

Egyik oszlop magassága állandó.

Forráskód


Változás az előzőhöz képest:
<style>   
  .jobb {height:200px; ....} 
....         
</style>
....

Eredmény*

3. példa:

Három oszlopos változat.

Forráskód


<style>
  .tarolo { height:240px;  width: 330px; position:relative;
     margin:10px; padding:0; 
     border:1px solid red;  
     background-color:yellow; color:blue;}    
 #fent {position:static; top: 0;  left: 0; 
       height:40px;  width: 330px; 
       background-color:#88ff88; }     
 #bal {position:absolute; top: 40px;  left: 0;  width: 100px; 
       background-color:#ff8888; color:#440000; } 
 #jobb {position:absolute; top:40px; right:0; 
       width:100px; height:200px;
       background-color:#8888ff;  } 
 #kozep {position:absolute; top:40px; left:100px;  
         height:200px; width:130px;
         background-color:#ff88ff;  }                                    
</style>     
….
<body>            
  <div class="tarolo"> 
       <div id="fent" >Felső elem tartalma... </div> 
       <div id="bal" >Baloldali elem tartalma... height:auto; </div> 
       <div id="jobb">Jobboldali elem tartalma... height:200px;</div> 
       <div id="kozep">Középső elem tartalma... height:200px;</div>               
  </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_position_absolute_oszlopok_03.html