ugrás a tartalomhoz

CSS: 3 oszlopos elrendezés

Anonymous · 2006. Május. 28. (V), 10.35
Hogyan tudok egy olyan 3 oszlopos elrendezést megvalósítani CSS-ben, hogy a két szélső oszlop szélessége 180px, a középső pedig kitölti a további rendelkezésre álló teret.

Jelenleg így néz ki a HTML kódom:
  1. <div id="wrapper">  
  2.   <div id="topleft">left</div>  
  3.     <div id="topcenter">center</div>  
  4.   <div id="topright">right</div>  
  5. </div>  
A CSS:
  1. #wrapper {  
  2.   width: 100%;  
  3. }  
  4.   
  5. #wrapper div {  
  6.   clear: right;  
  7.   float: left;  
  8. }  
  9.   
  10. #topleft {  
  11.   width: 180px;   
  12. }  
  13.   
  14. #topcenter {  
  15.   width: auto;  
  16. }  
  17.   
  18. #topright {  
  19.   width: 180px;   
  20. }  
Tehát a topcenter konténerrel kellene valamit csinálni, de nem tudom, hogy mit.

Köszi a segítséget
‹ prototype.js + Firefox + texfield.value Mezei levél űrlapról indítva ›
 ■
1

kis segítség is segítség

toxin · 2006. Május. 28. (V), 10.54
http://css.maxdesign.com.au/floatutorial/tutorial0901.htm

jó szórakozást ;)
2

bízz a yahoo-ban :)

Anonymous · 2006. Május. 28. (V), 12.28
http://developer.yahoo.com/yui/grids/index.html

Gyulus
3

Float és Negatív margó

Jano · 2006. Május. 28. (V), 13.37
A legegyszerűbb megoldás ha a két szélső oszlop van a kódban elől. Ekkor egyiket balra, másikat jobbra floatolod a középső oszlopnak pedig jobb és baloldali margót állítasz aminek értéke mindkét oldalon az oszlopok szélessége. (Illetve egy kicsit nagyobbra állíthatod, hogy legyen egy kis hely is az oszlop között.)

Ha a HTML-ben a fenti sorrendet szeretnéd megtartani, akkor a dolog kicsit módosul. A bal oldali részt ugyanúgy csinálod (oszlop flot:left, belső oszlop margin-left: bal oszlop szélessége)
A jobb oldalon viszont: a középső oszlopnak negatív margót adsz, hogy a harmadik oszlop azt higgye elfér még ott, majd a középső oszlopnak ugyanilyen értékű jobb oldali paddingot adsz, hogy a tartalom ne kerüljön a jobb oldali oszlop alá.

4

köszi

Anonymous · 2006. Május. 28. (V), 15.33
Köszi a segítséget, tökéletesen működik! :)