[Résolu] Un block qui ne s'adapte pas ....

Bonjour,
je cherche à réaliser un tableau, qui s'adapte en fonction de son contenu, l'idée est simple, mais j'ai l'impression que je vais jamais y arriver, je n'arrive pas à comprendre ce qui pose problème, pourtant j'ai tout essayé, position absolue, float, inline-block... mais .content ne veut rien savoir !

en image :

http://img11.hostingpics.net/pics/20386265ex.jpg

.content {
	background-color:#0C0;	
	height:auto;
	width:610px;
	min-height:100px;
	
}
.title{
	width: 100%;
	height:20px;
	border:1px solid red;
	float:left;
}
.left {
	width: 100px;
	height:100%;
	border:1px solid black;
	float:left;
}
.right {
	width: 500px;
	height:100%;
	border:1px solid blue;
	float:right;
}

Une idée ?

Je te conseille d'utiliser cette méthode : http://www.alsacreations.com/xmedia/tuto/exemples/css2/demos/table-layout/index.html

Pour en savoir plus sur display: table, regarde cette vidéo : http://www.dailymotion.com/video/xizy3r_soyez-revolutionnaire-utilisez-css2-kiwi-party-2011_tech
Modifié par maximemixam (02 Sep 2012 - 10:07)

tu viens de me sauver la vie maximemixam, merci beaucoup !

Et sinon, pour comprendre pourquoi ça ne fonctionnait pas : "dépassement des flottants"

avec les flottants, y a toujours des surprises...

on peut aussi faire un clear both sur l'élément d'après et/ou parfois dans certains cas rendre aussi flottant l'élément qui englobe les flottants qui posent problème. (.content dans ton cas)
Modifié par lionel_css3 (02 Sep 2012 - 13:23)

oui, ils ne sont pas top les flottants, il y a toujours des surprises

Ce qui est dommage avec display: table-cell, c'est qu'il ne prend pas en compte max/min-height, width..., mais j'ai réussi à m'adapter