Problème de div qui s'entrechoque

Bonsoir à tous,

Bon, le sujet à déjà été traité un peut partout sur le web mais avant même d'avoir regardé ce qui à déjà été fait sur le net j'avais déjà commencé ma petit bouilli de css et html xD. Bon je ne suis pas un pro du tout et commence depuis seulement quelques jours à peine le css et l'HTML. Je préfère de loin le PHP moi xD enfin bon...

Voilà le topo. Je souhaite mettre en place trois bloc en div, aligné horizontalement. Mais cela ne s'arrête pas à cela en fait.

Cela se sépare en 3 colonnes et 2 lignes. Chaque colonne possède 2 blocs et il y à donc 3 colonne. Soit un total de 6 blocs en tout.

J'ai réussi à fair eune début de bouilli si je puis dire ainsi. Et pour le moment le résultat est proche de ce que je recherche. Une image pour faire plus simple.

http://nsa20.casimages.com/img/2010/12/15/mini_101215015558517097.png

L'avantage de faire comme cela, est que chaque bloc de chaque colonne est indépendant et donc si un bloc possède plus de contenu qu'un autre il ne fera pas descendre les 2 autres de la première ou deuxième ligne. Bon maintenant le code html et css (le css je l'ai divisé en fichier pour l'avenir car énormément de code vont s'ajouter à la longue et cela me permettra d'y voir plus clair)

Le code html utilisé

            <div id="content">
				
					<div id="bloc-vertical-gauche">
					
						<div class="blocg-ligne1">Blocs de gauche Ligne 1Blocs de gauche Ligne 1Blocs de gauche Ligne 1Blocs de gauche Ligne 1Blocs de gauche Ligne 1Blocs de gauche Ligne 1Blocs de gauche Ligne 1Blocs de gauche Ligne 1</div>
						<div class="blocg-ligne2">Blocs de gauocs de gauocs de gauocs de gauocs de gauche Ligne 2</div>
						
					</div>

					<div id="bloc-vertical-centre">
					
						<div class="blocc-ligne1">Blocs du centre lignes du centre ligness du centre ligness du centre ligness du centre ligness du centre lignes du centre lignes du centre lignes du centre lignes du centre lignes du centre lignes du centre lignes du centre lignes du centre ligne 1</div>	
						<div class="blocc-ligne2">Blocs du centrdu centrdu centrdu centre ligne 2</div>
						
					</div>

					<div id="bloc-vertical-droite">
					
						<div class="blocd-ligne1">Bloc de droite ligne oc de droite lne oc de droite lne oc de droite lne oc de droite lne oc de droite lne oc de droite lne oc de droite ligne oc de droite ligne oc de droite ligne oc de droite ligne oc de droite ligne oc de droite ligne oc de droite ligne oc de droite ligne oc de droite ligne oc de droite ligne oc de droite ligne oc de droite ligne oc de droite ligne oc de droite ligne 1</div>
						<div class="blocd-ligne2">Bloc de c de c de droite ligne 2</div>
						
					</div>				
		
            </div>

Bon y a beaucoup de texte mais c'était pour tester les variations de hauteurs entre tout les blocs.

Avant-tout le code css de div content

#content {
  margin-left: auto; 
  margin-right: auto; 
  width: auto; /* largeur obligatoire pour être centré */ 
  height:auto;
}

Le css pour la colonne de gauche

/* Conteneur des blocs de gauche */
#bloc-vertical-gauche {
	float: left;
	width: auto;
	max-width: 350px;
	height: auto;
}

/* Menu de navigation */
.blocg-ligne1{
	background: url(../z_images/bg-contenu.jpg) repeat-y center;
	width: auto;
	max-width: 350px;
	padding: 5px 5px 5px 5px;
	margin: 20px;
}
/* Menu de navigation */
.blocg-ligne2{
	background: url(../z_images/bg-contenu.jpg) repeat-y center;
	width: auto;
	max-width: 350px;
	padding: 5px 5px 5px 5px;
	margin: 20px;
}

Le css pour la colonne du millieu

/* Conteneur des blocs du centre */
#bloc-vertical-centre {
	float: left;
	width: auto;
	max-width: 350px;
	height: auto;
}

/* Contenu principal */
.blocc-ligne1 {
	background: url(../z_images/bg-contenu.jpg) repeat-y center;
	width: auto;
	max-width: 350px;
	padding: 5px 5px 5px 5px;
	margin: 20px;
}
/* Contenu principal */
.blocc-ligne2 {
	background: url(../z_images/bg-contenu.jpg) repeat-y center;
	width: auto;
	max-width: 350px;
	padding: 5px 5px 5px 5px;
	margin: 20px;
}

et enfin le css de la colonne de droite

/* Conteneur des blocs de droite */
#bloc-vertical-droite {
	float: left;
	width: auto;
	max-width: 350px;
	height: auto;
}

/* Contenu secondaire */
.blocd-ligne1 {
	background: url(../z_images/bg-contenu.jpg) repeat-y center;
	width: auto;
	max-width: 350px;
	padding: 5px 5px 5px 5px;
	margin: 20px;
}

/* Contenu secondaire */
.blocd-ligne2 {
	background: url(../z_images/bg-contenu.jpg) repeat-y center;
	width: auto;
	max-width: 350px;
	padding: 5px 5px 5px 5px;
	margin: 20px;
}

Au moins vous aurez tout comme cela. En espérant que ce ne soit pas trop un chantier irrécupérable xD

Donc pour en venir au problème que je pense vous l'autre compris. En réduisant la taille du navigateur pour voir la réactions des blocs sur la largeur et la hauteur, les blocs descendent un par un les uns sous les autres.

Hors j'aimerais qu'il ne descendent pas mais tout simplement que l'ensemble se réduise au fur et à mesure avec un minimum en largeur pour pas faire trop petit à la fin.

Pour les blocs en eux même il suivent la cadence, il se réduisent bien au fur et à mesure sans faire sortir le contenu...

en espérant que certains pourront m'aider avec ce problèmes.

Et en espérant que tout s'affiche bien car j'ai pas trouvé le bouton prévisualisation sur le forum en créant le sujet -_-.

Cordialement Alex
Modifié par Snowleoo (15 Dec 2010 - 02:14)

Salut Snowleoo,
Il faut que tu donnes une largeur fixe (en px) à ton bloc content.

Bonjour,

width et height ont par défaut la valeur "auto", alors il est inutile de le spécifier dans la feuille de style...