Problème lié aux margin-right

Bonjour,

Ayant été souvent confrontée à ce problème, et n'ayant jamais vraiment trouvé de solution uniquement en css, je m'en remets à ce forum.

Ma page est en 2 parties, une principale et une colonne à droite,
j'ai déclaré une width 75% à ma div principale et 22% à ma colonne

Dans la partie principale, il y a des vignettes, en float left, qui se disposent les unes à côté des autres, formant un 'damier', elles se présentent ainsi

.event-vignette {
    height: 150px;
    margin: 0 10px 10px 0;
    width: 347px;
}

A droite de ce damier il y a donc une marge trop grande, entre la partie principale et la sidebar, que j'aimerais réduire, mais si j'agrandis le margin-right de mes .event-vignette sur Firebug, eh bien les vignettes de droite passent en dessous..
Or, ce que je cherche à obtenir, c'est la suppression/diminution de la marge à droite des vignettes les plus à droite du damier, afin de réduire le vide qui est entre la partie principale et la sidebar... mais pas la suppression des marges entre les vignettes...
Comment faire cela en css ?

merci

Bonjour,

Est-il possible de voir une page en ligne (même minimale reproduisant votre structure) ?

oui

Hello,

En CSS, tu disposes de la propriété nth-child bien pratique :

.event-vignette:nth-child(odd) {
    margin: 0 0 10px 0; /* annule la marge de droite pour les éléments concernés */
}

Tu peux utiliser even ou odd suivant les besoins.
À adapter à ton cas

salut,
ou tout simplement agrandir le contenu principal à 78% pour pouvoir mettre les marges que tu veux.
Tu bénéficieras en plus d'une plus large compatibilité.

Zelalsan a écrit :
salut,
ou tout simplement agrandir le contenu principal à 78% pour pouvoir mettre les marges que tu veux.
Tu bénéficieras en plus d'une plus large compatibilité.

Je te remercie Zelalsan, effectivement 78% pour le contenu principal ça passe, mais si je veux agrandir encore les marges entre vignettes ou bien agrandir juste le width des vignettes, ça ne passe pas..
La solution que j'ai trouvée est-elle correcte : agrandir par exemple à 102% la balise aside contenue dans la div principale ?

Pourquoi plus large compatibilité, nth-child n'est pas compatible avec tous les navigateurs ?

audrasjb a écrit :
Hello,

En CSS, tu disposes de la propriété nth-child bien pratique :

.event-vignette:nth-child(odd) {
    margin: 0 0 10px 0; /* annule la marge de droite pour les éléments concernés */
}

Tu peux utiliser even ou odd suivant les besoins.
À adapter à ton cas

merci audrasjb
c'est vachement bien
le problème il me semble, c'est que ça ne fonctionne pas avec IE8...