Passer de 4 colonnes à 3 colonnes de même hauteur

Bonjour à tous

Je travaille sur un contenu qui, sur une min-width de 1200px est sur 4 colonnes. Comme il fallait que les colonnes soient de même hauteur, j'ai utilisé le display:table, ainsi que des display:table-cell sur mes colonnes. Sachant que j'ai 2 lignes de 4 colonnes.

Sauf qu'à partir de 1000px, j'aimerais que cela passe sur 3 colonnes sauf que je ne trouve pas de solutions pour qu'elles gardent la même hauteur..

Voilà en gros à quoi ressemble mon code :

<div id="sectionContainer">
	<div id="sectionRow1">
		<div class="section">
		</div>
		<div class="section">
		</div>
		<div class="section">
		</div>
		<div class="section">
		</div>
	</div>
	<div id="sectionRow2">
		<div class="section">
		</div>
		<div class="section">
		</div>
		<div class="section">
		</div>
		<div class="section">
		</div>
	</div>
</div>

Ainsi que ma CSS associée :

div[id^="sectionRow"] {
	display: table;
	text-align: left;
	width:100%;
}
div[id^="sectionRow"] > .section {
	display: table-cell;
	width: 24.9%;
	text-align: left;
	border-right:1px solid #ccc;
	vertical-align:top;
}
div[id^="footerRow"] > .section:last-of-type {
	border-right:0;
}

Alors je ne sais pas si je dois changer la structure de mon html ou si je peux faire passer sur 3 colonnes en css, j'avoue que je galère un peu là

Merci de votre attention et de votre aide

Lulu
Modifié par Luleen (20 Jun 2014 - 15:44)

J’ai une question : quand tu dis passer sur trois colonnes, cela signifie que tout le contenu doit se répartir dans les trois colonnes, ou bien que ta quatrième colonne passe en-dessous/au-dessus ?

Pour l’option 1 : tu ne pourras pas avec table-cell. Il faudra utiliser les colonnes en CSS3, qui sont plutôt bien supportées mais cela nécessitera tout de même un polyfill, je suppose ;

Pour l’option 2 : display: table est magique. Tu pourras appliquer un display: table-footer-group ou display: table-row sur ta quatrième colonne pour qu’elle change de disposition. À tester / vérifier, mais dans le principe ça devrait être possible.

Bon courage !

Bonjour Ten !

C'est l'option 2 pardon, il est vrai que je n'ai pas précisé.
En tout j'ai donc 8 colonnes par ligne de 4 colonnes. Il faudrait ensuite que ca passe par ligne de 3 colonnes donc pour 8 blocs, cela ferait 3, 3 et 2 avec un trou sur la dernière ligne. J'espère que j'arrive à être un minimum claire

Je vais tester du groupe le table-footer-group que je ne connaissais pas du tout mais est ce que du coup ma quatrième colonne ne sera pas toute seule sur une ligne ?

Merci en tout cas de ta réponse, je teste et je reviens faire mon compte rendu

Ha si, normalement ta quatrième colonne sera isolée !

Je n’avais pas saisi que tu avais plusieurs lignes

Malheureusement, du coup je ne vois pas comment faire. Mis à part en repartant vers une grille flottante ou en inline-block, mais tu perdras le bénéfice des hauteurs égales...

Oui c'est bien ca mon soucis, je dois conserver la hauteur égale vu que j'ai des bordures de délimitation entre mes colonnes parce que sinon j'avais déjà considéré ces solutions là aussi

Après il me reste la solution de dupliquer mon contenu en le mettant sur 3 colonnes par ligne, de le masquer à 1000px+ et de ne l'afficher qu'à 1000px de large mais ca fait lourd ...