28172 sujets

CSS et mise en forme, CSS3

[Résolu] 2 colonnes, plusieurs lignes par bloc dans un contenant

Bonjour à tous,

Je cherche à faire 2 colonnes distinctes (div ?), l'une à gauche, l'une à droite avec un nombre variable de lignes par colonne et je souhaiterais que la div contenant ces deux colonnes ajuste sa hauteur en fonction de la plus haute colonne.

J'espère être assez clair, voici un petit schéma pour vous aider à comprendre mon souhait.

upload/44787-alsa.png

J'ai essayé plusieurs procédés avec des div flottants, des divs en position relative, absolue... mais je ne parviens pas au résultat souhaité.

Quelqu'un aurait une idée pour m'éclairer ?

Merci beaucoup
Je serais toi, j'essaierais avec des div flottants ou en position relative. Au pire, des absolute... Mais je ne suis pas sûr que tu parviennes au résultat souhaité. Smiley ohwell
bonsoir,

Ce type de formatage est souvent construit sur une base d’éléments flottants en maitrisant leurs effets de bord. (rechercher debordement flottant, layout/contexte de formatage)

Mais d'autre possibilités sont envisageables selon le gout de chacun et des comportements attendus .

Voici un page ou tu peut tester différentes méthodes en commentant et de-commentant quelques options possibles (option float par defaut active.). 
<!DOCTYPE html>

<html lang="fr">
<head>
	<meta charset="UTF-8">

	<title>test simili colonnes </title>

<style type='text/css'>
.holdit, p  {border:solid;width:98%;margin:1%: }
.ib48 {width:48%;vertical-align:top;margin:0 0.5%;}
.h100 {height:100px;}
.h20 {height:20px;}



/* choix de methodes, a tester pour observer les differences de comportements  

*/

/* inline-block */
.ib48 {display:inline-block;}

/* table
.holdit {display:table;border-spacing:1em 0;}
.ib48 {display:table-cell;} */

/* inline-table trés similaire a inline-block; mais autorise le conteneur a s'elargir 
.ib48 {display:inline-table;} */

/* float */
.holdit {overflow:hidden;}
.ib48 {float:left;margin:0 1%;}







/*  parenthèse sur linear-gradient
colonnes factices , habillage du fond avec 2 couleurs distinctes 
.holdit {
background-image:-moz-linear-gradient(0deg, #FFB68C 0, #FFB68C  49.9%, #000 49.9%, #000 50.1%, #F3E389 50.1%, #F3E389 100%);
background-image:-webkit-linear-gradient(0deg, #FFB68C 0, #FFB68C  49.9%, #000 49.9%, #000 50.1%, #F3E389 50.1%, #F3E389 100%);
background-image:-o-linear-gradient(0deg, #FFB68C 0, #FFB68C  49.9%, #000 49.9%, #000 50.1%, #F3E389 50.1%, #F3E389 100%);
background-image:-ms-linear-gradient(0deg, #FFB68C 0, #FFB68C  49.9%, #000 49.9%, #000 50.1%, #F3E389 50.1%, #F3E389 100%);
background-image:linear-gradient(0deg, #FFB68C 0, #FFB68C  49.9%, #000 49.9%, #000 50.1%, #F3E389 50.1%, #F3E389 100%);
} */
</style>
</head>
<body>
<div class="holdit">

<div class="ib48">
<p class="h100"> boite  h100 ffffffffffffffffffffffffffffffffffffff-Selon-la-methode-choisis,-Que-se-passe-t-il-quand-le-contenu-est-trop-long-?-fffffffffffftextefffffffffffffffffffffffffffffimagefffffffffffffffffffffffffffffff</p>
<p class="h100"> boite  h100 </p>
<p class="h100"> boite  h100 </p>
</div>

<div class="ib48">
<p class="h20"> boite  h20 </p>
<p class="h20"> boite  h20 </p>
<p class="h20"> boite  h20 </p>
<p class="h20"> boite  h20 </p>
<p class="h20"> boite  h20 </p>
<p class="h20"> boite  h20 </p>
<p class="h20"> boite  h20 </p>
<p class="h20"> boite  h20 </p>
<p class="h20"> boite  h20 </p>
<p class="h20"> boite  h20 </p>
<p class="h20"> boite  h20 </p>
<p class="h20"> boite  h20 </p>
</div>

</div></body></html>


cordialement
Bonsoir,

Une solution très simple et compatible pour les vieilles versions d'IE grâce à une règle appliquée via une classe conditionnelle.

HTML :
<div id="conteneur">

	<div id="colonne_1">
		<div></div>
		<div></div>
	</div><!--
	
	--><div id="colonne_2">
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</div>

</div>


CSS :
body {
	margin: 0;
	padding: 0;
}

#conteneur {
	width: 920px;
	margin: 0 auto;
	padding: 20px;
	background-color: red;
}

#conteneur > div {
	display: inline-block;
	vertical-align: top;
}

.ie7 #conteneur > div {
	display: inline;
	zoom: 1;
}

#colonne_1 {
	width: 290px;
	margin-right: 20px;
}

#colonne_2 {
	width: 610px;
}

#colonne_1 > div {
	height: 100px;
	background-color: blue;
}

#colonne_2 > div {
	height: 50px;
	background-color: green;
}

#colonne_1 > div + div,
#colonne_2 > div + div {
	margin-top: 20px;
}


Pour ma part je privilégie le positionnement via display: inline-block; au positionnement flottant.
Le premier nécessite d'échapper les white-spaces pour un rendu au pixel près ; le second implique l'ajout d'une balise supplémentaire qui portera la déclaration clear: both;.
Le rendu est le même, c'est un choix ! Smiley smile
jeremy-p a écrit :
le second implique l'ajout d'une balise supplémentaire qui portera la déclaration clear: both;.


Pas forcément, tu peux utiliser la technique du "Clearfix" (Google est ton pote).
Modifié par jb_gfx (22 May 2012 - 02:09)
bonjour,

en effet pour les flottant il y a plusieurs possibilités dont le clear .
Pour le white-space, on peut dimensionnert a une taille légèrement inférieur et se contenter d'un text-align:center .Comme apparement il n'est pas question ici d'afficher fonds ou bordure le white-space peut vivre sa vie Smiley smile .

En fait je ne privilégie personnellement aucune solution, cela dépend toujours du contexte. Mais pour choisir, AMHA, il est bien de connaitre les différentes possibilité et savoir jusqu’où et comment on veut aller dans le support des vieux machins.(pareil partout ou dégradation complète ou partielle ).

Et pis, c'est bien de savoir comment réagissent les flottants (même si la mode vise à les renier, mais ça, c'est surement pour élargir les choix possibles) :
a écrit :
J'ai essayé plusieurs procédés avec des div flottants, des divs en position relative, absolue... mais je ne parviens pas au résultat souhaité.
Quelqu'un aurait une idée pour m'éclairer ?

Pour le positionnement absolu, ce n'est pas franchement adapté sur une zone qui devrait être flexible. Pour les flottants, dans les posts précédent et tu devrais pouvoir y trouver toutes les pistes et exemples utiles.

Chaque méthode peut-être utilisée a des niveaux différent dans une même page.
Un autre exemple http://yidille.free.fr/discontinu/fake-column-count-2.html avec:
- display:table en premier niveau pour le centrage x,y ,
- puis inline-block pour les "colonnes" et une astuce de centrage justifié avec text-align:justify
- pour titiller une alternative partielle en float pour IE (ou inline) , pas forcement réussie,
- puis du float encore pour centrer une image en
- position absolue dans le texte en travers des 2 colonnes.
- le tout fluide entre deux valeurs de largeur

tout ça cohabite plutôt bien dans les navigateur récent sans pour être, au temps présent, des pratiques conseillées ou utiles ni même la meilleur façon de produire ce type de mise en forme.
Le départ, avant que ça dérape, c’était inspiré de column-count, column-rule et column-break.

Et en y ajoutant un peu de css3, sans se modérer on arrive à faire presque n'importe quoi Smiley smile , lol

++

p.s. les pages de test avec différentes méthodes (voir les posts précédents) restent dans le sujet, celle-ci sert de fourre-presque-tout Smiley cligne .
Bonjour à tous,

Merci tout le monde pour votre aide, cela m'a bien aidé Smiley smile !

Je pense opter pour la solution de jeremy-p pour sa simplicité et qui me permet de m’affranchir des contraintes des flottants etc... que je ne maîtrise pas encore trop !

Bonne continuation et encore merci à tous !

Cordialement
Sujet clos
Aller à