[HTML/CSS] Colonnes en CSS

Marsh Posté le 11-03-2004 à 21:59:23

Bon je cherche à faire la chose suivante : j'ai une série de

Code :

<div class="case">
blablabla
</div>

assez longue. Pour gagner de la place je voudrais pouvoir les affichuer en 2 ou 3 colonnes à l'aide de feuilles de style.

Pour l'instant pour deux colonnes j'utilise :

Code :

.case {
width: 45%;
float: left;
}

Ca marche, mais seulement si les cases ont la même hauteur.

Si ce n'est pas le cas, la case 1 sera bien en haut à gauche, la 2 en haut à droite mais si elle est plus haute que la case 1, la case 3 sera bien à gauche mais pas immédiatement sous la 1 : le haut sera aligné sur le bas de la case 2 :fou:

Une idée pour faire ça de façon simple et propre ? Moi je bloque...

Message édité par Sixtiz le 11-03-2004 à 22:00:48

Reply

Marsh Posté le 11-03-2004 à 21:59:23

Reply

Marsh Posté le 11-03-2004 à 22:16:15

Regarde ces sites :
http://openweb.eu.org
http://www.alsacecreations.com/articles/

J'espere qu'ils pourront t'aider, sinon essaye de metre une page online montrant le probleme. Une image en dit parfois plus qu'un explication pas toujours claire du probleme.

Reply

Marsh Posté le 11-03-2004 à 22:28:54

donne la propriété "clear : both;" a ta case 3, de ce fait elle ne pourra pas s'afficher a coté dune case qui est déclaré comme float, et sera forcément en dessous des cases 1 et 2...

mais je ne suis pas sur que c'est cela que tu souhaite... comme cerel je ne trouve pas ton problème très clair, et jai du mal a me rendre compte de ce que tu souhaite faire...

Reply

Marsh Posté le 11-03-2004 à 22:43:58

bon 2 ou 3 colonne en float de longuer différente, mais qui doivent toujours être les une a cote des autres ..
c'est bien ça ?

si je comprend juste je pense que le clear:both; devrait t'aider
CSS

Code :

.case
{
float: left;
width: 33%;
}
.spacer
{
clear: both;
visibility: hidden;
}

HTML

Code :

<div>
<div class="case">blabla</div>
<div class="case">blabla</div>
<div class="case">blabla</div>
<hr class"spacer"></div>
</div>

ca devrait le faire

---------------
Tout n'est descriptible que du point de vue de l'observateur, donc sûrement faux pour le reste du monde.

Reply

Marsh Posté le 11-03-2004 à 22:49:23

Ok c'est vrai qu'un exemple c'est plus pratique alors voilà : http://193.48.225.246/sixtiz/test.html.

Le problème est donc d'éviter l'espace entre la case 1 et la case 3...

Edit : Pb de DNS... ça fait un bail que ça dure d'ailleurs :pfff: