Présentation d'une partie du contenu sous formes de colonnes

[labarique]

Bonjour,

j'ai un souci pour la mise en page de mon site web : je ne parviens pas à coder proprement un affichage sous formes de colonnes.

Mon problème est le suivant : j'aimerais réussir à définir une class .colonne de façon à ce qu'elle me permette d'afficher le contenu choisi sous formes de colonnes. A priori, ça a l'air simple, la seule contrainte étant qu'il ne doit pas y avoir de class .colonnedroite et .colonnegauche, puisque la class est intégrée dans une boucle SPIP (qui reproduira donc plusieurs fois : div class="colonne").

Pour info : il y a 4 éléments qui vont être ainsi affichés.

Voici mon code html (qui simule le résultat produit par SPIP)

<div class="cellule_sommaire">

<H2>CONNAISSANCES</H2>

<div class="colonne">

<span class="entete">Article scientifique</span>
<ul class="connaissances">
  <li>Article 1</li>
  <li>Article 1</li>
  <li>Article 1</li>
</ul>

</div>

<div class="colonne">

<span class="entete">Sites Web</span>
<ul class="sites">
  <li>Article 1</li>
  <li>Article 1</li>
</ul>

</div>

<div class="colonne">

<span class="entete">Autres documents</span>
<ul class="livres">
  <li>Article 1</li>
  <li>Article 2</li>
  <li>Article 3</li>
</ul>

</div>

<div class="colonne">

<span class="entete">Encyclopédie</span>
<ul class="encyclo">
  <li>Article 1</li>
  <li>Article 2</li>
  <li>Article 3</li>
</ul>
</div>
</div>

Et le code CSS afférent :

.cellule_sommaire
{
	 font-size: small;
	 clear: left;
	padding-bottom: 5px;
}

.colonne{

	 width: 48%;
	 float: left;
	 border-color: #f40;
	 border-style: solid;}

En l'état, la colonne 1 et 2 s'alignent bien côte à côte, mais comme la colonne 2 est plus courte, la colonne 3 vient se mettre juste en dessous d'elle, touchant le bord de la colonne 1. Du coup, la colonne 4 se met sous la colonne 3 mais aligné avec la colonne 1, ce qui donne un grand vide entre le bas de la colonne 1 et le haut de la colonne 4.

xxxxx-COLONNE 1-xxxxxx-COLONNE2 - xxxx

xxxxx-Texte1-xxxxxxxxxx - Texte 2 - xxxxx

xxxxx-Texte 1-xxxxxxxxx - Texte2 - xxxxxx

xxxxx-Texte 1-xxxxxxxxx - COLONNE 3 -xxx

xxxxxxxxxxxxxxxxxxxxx - Texte3-xxxxxxxx

xxxxxxxxxxxxxxxxxxxxx - Texte3-xxxxxxxx

xxxxxxxxxxxxxxxxxxxx - Texte 3 - xxxxxxx

xxxxx-COLONNE 4-xxxxxxxxxxxxxxxxxxxxx

xxxxx-Texte 4 -xxxxxxxxxxxxxxxxxxxxx

xxxxx-Texte 4 -xxxxxxxxxxxxxxxxxxxxxx

Si je mets clear:left dans .colonne, alors les balises s'alignent les unes sur les autres .

Quelqu'un aurait-il une idée ? D'avance merci !

Modifié 29 Avril 2008 par labarique

[Ifmy]

Ajoutez clear: right et non left

[labarique]

Non, cela ne fonctionne pas non plus. Mais merci pour la suggestion... Je continue à chercher...

[Ifmy]

les colonnes doivent être en float: left et clear: right. aucune raison que cela ne fonction pas.

WooT si

48*2 = 96

100-96 = 4

Il ne reste que 4 % de l'espace dispo à la 3eme colonne qui mesure 48 %

Vous dites qu'en clear left elles sont les une sur les autres ? je peux voir le reste de la css ?