Coloane in CSS

[bvlucretiu]

Buna seara!
Cum fac în CSS ca în cazul în care am o serie de elemente așezate în coloană iar aceasta se întinde mult în jos și aș dori să nu se afișeze pe o singură coloană lungă ci să se împartă în mai multe coloane mai scurte, cum pot stabili lungimea coloanei pe care să se întindă coloana?
Vă mulțumesc mult!

Salut
Ca sa afisezi textul in pagina pe coloane folosind CSS, se poate aplica proprietatea CSS3 column-count. Pe langa aceasta pot fi utilizate proprietatile: column-rule (linie intre coloane) si column-gap (spatiul intre linia dintre coloane si text).

Poti de asemenea sa setezi o inaltime cu proprietatea height (sau max-height). In acest caz, daca textul depaseste numarul de coloane setat la column-count, se va crea automat o alta coloana, dar se va extinde lungimea pe orizontala. Ca sa nu depaseasca latimea paginii, se poate seta cu width (sau max-width) o lungime fixa, si se aplica overflow:auto; la elementul respectiv.
Exemplu (3 coloane):

Cod: Selectaţi tot

<style>
.cls{
 height:80px;
 max-width:80%;
 overflow:auto;
 border:1px solid blue;

  /* Setare nr coloane */
 -moz-column-count:3;       /* Firefox */
 -webkit-column-count:3;    /* Safari, Chrome */
 column-count:3;

  /* Setare linie intre coloane */
 -moz-column-rule:2px outset #fe01fe;       /* Firefox */
 -webkit-column-rule:2px outset #fe01fe;    /* Safari, Chrome */
 column-rule:3px outset #fe01fe;

  /* Setare spatiu dintre linie si text */
 -moz-column-gap:1.1em;       /* Firefox */
 -webkit-column-gap:1.1em;    /* Safari, Chrome */
 column-gap:1.1em;
}
</style>

<div class="cls">
 Linia 1 <br/>
 Linia 2 ... <br/>
 Rand 3 <br/>
 Randul 4 <br/>
 Linia 5 ... <br/>
 Rand 6... <br/>
 Rand 7... <br/>
 Linia 8 <br/>
 Randul 9 ... <br/>
 Linia 10
</div>

Era vorba despre pagina principala (index.php) al serverului local wamp si am incercat toate variantele cu firefox si nu merge, nu stiu ce nu am facut cum trebuie!?
Cei drept ca este un pic cam tarzie ora la care am incercat si este posibil sa fie si acesta motivul... o sa mai incerc maine!