3 colonnes en CSS

[yobiwan]

Je sais que le sujet certainement déjà du etre débattu pas mal de fois, mais les solutions que j'ai trouvé ne conviennent pas vraiment.

J'aimerais simplement créer 3 colonnes via CSS avec chacune un backrground différent et qui s'adapte quelque soit la taille des colonnes (3 colonnes de la meme taille et le fond s'adaptant).

Celle de gauche du jaune

celle du centre du bleu

celle de droite du vert.

Pour l'instant presque pas de problemes.

La ou je ne vois pas la solution dans les exemples donnés c'est que dans le source, je veux que les colonnes apparaissent exactement comme visuellement. A savoir 1. jaune 2. bleu 3. vert.

Dans tous les codes que j'ai trouvé, la colonne du milieu est codée soit en 1 soit en 3 mais jamais en 2. De plus je ne veux pas de javascript.

Qqun a t-il un code qui permete cela et qui soit exploitable par la suite ?

merci d'avance

[Lentreprenaute]

Yobi,

comme cela ca devrait fonctionner

ca te cree un div principal centré en milieu de page avec 3 div à l'intérieur

placé en colonne avec le float, overflow c'est pour que le contenu ne puisse sortir

des dimensions fixées, donc tu peux mettre les fonds de couleur que tu veux.

j'ai mis des id tu peux s'il le faut mettre des class à la place!

a+

J'espere que ca va marcher!

html

<div id="container">
  <div id="col1">blabla</div>
 <div id="col2">blabla</div>
 <div id="col3">blabla</div>
</div>

css

#container {margin-left: auto;margin-right: auto;width: 600px; background:... }
#col1 {float:left; WIDTH: 200px; overflow :hidden;background:.....  } /*colonne gauche*/
#col2 {float:left; width:200px; overflow :hidden; background:.....  }/*colonne milieu*/
#col3 {float:left; width:200px; overflow :hidden; background:.....  }/*colonne droite*/

[yobiwan]

Ben le truc c'est que je veux que les 3 colonnes fassent la meme taille quoi qu'il arrive (mais en vertical pas en horizontal)

[Raphael]

http://www.alistapart.com/articles/fauxcolumns/

[Lentreprenaute]

je vois mieux le probleme et selon ta charte graphique j'ai peut etre une soluce

tu mets un background au div container avec une image pour rester concret avec mon exemple tu fais une image de width de 600 /divise en 3 zone de couleurs et 5 px de hauteur par exemple et la ce div sera toujours egal en vertical sur le div colonne le plus long!

faut que ta charte soit pas trop compliqué mais ca peut le faire.

je viens de lire cette article pour mettre des div a 100% en hauteur,

"http://www.webmasterworld.com/forum83/200.htm"

et ca marche en plus dire que je comprenais pas jusqua aujourdh'ui comment mettre un div a 100 % de hauteur.

Modifié 23 Février 2004 par Lentreprenaute