Mise en page 4 colonnes (HELP)

Bonjour tout le monde,
je suis nouvelle sur ce forum et après avoir lu x documents, tatoné plusieurs heures sur mon problème, je n'ai de choix que de vous le soumettre. Je suis relativement débutant et je suis en train de m'arracher les cheveux. Si vous auriez la gentillesse de m'aider ce serait vraiment sympa.

Je souhaite donc faire 4 colonne dans une balise section en html5 et css3.
Dans ces colonnes, j'ai créé des articles dans lesquels il y aura une avec titre et légende. Chaque photo est une sorte de thumbnail sur laquelle on pourra cliquer pour nous amener sur une galerie photo.

Ma section (#quatre_colonnes) mesure 960px.
J'imaginais faire ma mise en page comme ceci:
colonne 1 (.colonne): 216px + 32px de marge droite
colonne 2 (.colonne): idem
colonne 3 (.colonne): idem
colonne 4 (.last_colonne): 216px et pas de marge à droite.

(donc 216 + 32 + 216 + 32 + 216 + 32 + 216 = 960px!!!!!!!)

J'ai donc écrit en css:

#quatre_colonnes{
	padding:0;
	margin:0;}
	
.colonne{
	display: inline-block;
	width:216px;
	margin-right:32px;}

#last_colonne{
	width:216px;
	margin-right:0px;}

Peut importe ce que je fasse, la 4e colonne s'aligne en-dessous de la première.... J'ai donc 3 colonnes (donc 3 photos alignées horizontalement séparées d'une marge de 32px, mais la 4e photo, alors que je ne lui ai mis aucune marge à droite, ce qui devrait la faire rentrer dans les 960px, se met à la ligne sous la 1e photo)

Que dois-je faire???

PS: je précise que j'ai validé mon code html5 et mon css3 et qu'il n'y a pas d'erreur.


Voici mon code html5 si jamais:

<!-- SECTION THUMNAILS SUR 4 COLONNES -->
	
<section id="quatre_colonnes">

	<article class="colonne">
            <img src="images/carre_noir.jpg" title="carre_noir"/>
            <h3>djskajdsadl</h3>
            <p>dhkjsahdskjhdaks</p>
        </article>
        
        <article class="colonne">
           <img src="images/carre_noir.jpg" title="carre_noir"/>
           <h3>djskajdsadl</h3>
           <p>dhkjsahdskjhdaks</p>
        </article>
        
        <article class="colonne">
           <img src="images/carre_noir.jpg" title="carre_noir"/>
           <h3>djskajdsadl</h3>
            <p>dhkjsahdskjhdaks</p>
         </article>
           
        <article id="last_colonne">
        	<img src="images/carre_noir.jpg" title="carre_noir"/>
                 <h3>djskajdsadl</h3>
                <p>dhkjsahdskjhdaks</p>
        </article>

</section>

Hello,

Tes trois premières colonnes sont en display:inline-block. La quatrième est en display:block, il est donc logique qu'elle passe à la ligne.

En partant du principe que tu n'assures pas le support d'IE7 (qui ne gère pas display:inline-block ou display:table-cell), tu peux:
- Utiliser display:table-cell pour les 4 colonnes.
- Utiliser display:inline-block pour les 4 colonnes, ce qui demandera de gérer les espaces entre les colonnes (lire ou relire cet article en entier).

En passant, tu n'as pas besoin d'un identifiant pour la quatrième colonne. En utilisant une même classe sur chaque élément, tu peux avoir:

.colonne {
  /* styles pour toutes les colonnes */
}
.colonne:first-child {
  /* styles pour la première */
}
.colonne + .colonne {
  /* styles pour toutes les colonnes sauf la première */
}

c'est largement suffisant pour tes besoins. Supporté à partir d'IE7.
(Il y a aussi :last-child et :nth-child(), mais supporté dans IE9+ uniquement.)
Modifié par fvsch (04 Feb 2012 - 16:56)

Merci beaucoup pour ta réponse, en effet, j'ai mis en display inline-block sur ma 4e colonne et ça marche! J'ai aussi mis les commentaires pour enlever les white spaces.

J'ai lu ton lien, mais juste une questions quand au css à mettre pour IE:
quand on demande que "element" soit mis en display:inline, est-ce que c'est le mot element que je dois mettre ou .colonne? Ou est-ce que element est une notion générale?


element {
zoom: 1; /*offre le layout à un élément (*)*/
display: inline;
}

Merci infiniment!

dabow a écrit :
au css à mettre pour IE

Pour IE 7. IE 8 et 9 ont un support natif correct de display:inline-block, de même que le futur IE 10. Il faut donc appliquer ce code à IE 7 uniquement (ou IE 7 et inférieurs), par exemple via un commentaire conditionnel.

dabow a écrit :
quand on demande que "element" soit mis en display:inline, est-ce que c'est le mot element que je dois mettre ou .colonne?

On a utilisé "element" dans l'exemple, on aurait pu aussi bien écrire "#exemple" ou "sélecteur" par exemple. Il faut bien sûr appliquer ces styles au(x) bon(s) élément(s), donc à toi de mettre le sélecteur CSS qui va bien.

Il y a un article en trois parties sur les sélecteurs CSS 2.1 par ici, si tu veux réviser un peu.