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:

<div id="wrapper">
  <div id="topleft">left</div>
    <div id="topcenter">center</div>
  <div id="topright">right</div>
</div>
A CSS:

#wrapper {
  width: 100%;
}

#wrapper div {
  clear: right;
  float: left;
}

#topleft {
  width: 180px; 
}

#topcenter {
  width: auto;
}

#topright {
  width: 180px; 
}
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! :)