Div qui ne s'auto agrandit pas

Bonjour à tous,

J'ai besoin pour une de mes pages d'avoir un tableau à l'intérieur d'un div.
Voici une page présentant mon problème :

	<div style="background-color:red; height:200px; width:50px;">
		<table width="100%" style="background-color:blue;">
			<tr>
				<td>
testtesttesttesttesttesttesttesttesttesttesttesttesttesttestttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestt
				</td>
			</tr>
		</table>
	</div>

J'aimerais que mon div rouge, fasse 50px de base en alrgeur, le contenu de ma table est dynamique donc parfois cela dépasse 50px, le problème est que le div ne s'agrandit pas en fonction du contenu de la table, et je ne vois pas comment je peux régler ce problème.

Si vous avez des idées ?
Merci d'avance,

Cordialement,

Deedee
Modifié par Deedee (13 Nov 2009 - 14:06)

Bonjour, déjà avec ton "testtesttesttesttesttesttesttestte..." sans espace ça pète forcément la mise en page sur la largeur.

A part ça, ça marche très bien, je te l'ai refait en css :

<div> 
        <table> 
            <tr> 
                <td>ton texte</td> 
            </tr> 
        </table> 
    </div>

div {
	background-color: #F00;
	width: 50px;
}

table {
	width: 100%;
}

T'es sûr de vouloir faire des cases de 50 pixels de large ?

Salut Ralf et merci pour ta réponse,

J'ai volontairement mis le css intra code, pour que les gens puisse juste copier coller pour tester.

J'ai volontairement mis un long mot afin de montrer mon problème, dans la réalité, j'ai juste un tableau avec du texte normal mais avec de très nombreuse colonne potentiellement (suffisamment pour dépasser les 200px du div initial)

J'avais oublié le plus important :

div {
	background-color: red;
	width: 50px;
	min-height:200px;
	height:auto !important;
    height: 200px;

}

Pour la hauteur, min-height est ton ami. (Les deux lignes supplémentaires dans l'exemple de Ralf sont un hack pour IE6. Personnellement je passerais plutôt par un commentaire conditionnel, voire je ne m'en occuperais pas du tout et tant pis pour IE6.)

Tu parles de nombreuses colonnes, donc je suppose qu'il y a un problème de largeur, mais en même temps tu nous parles d'une dimension de 200px qui dans ton exemple correspond à une hauteur. Te serais-tu emmêlé les pinceaux?

Quoi qu'il en soit, pour la largeur c'est une autre affaire. Un DIV en width:auto (par défaut) va prendre toute la place disponible dans son conteneur (moins ses propres marges éventuelles). La largeur du DIV ne dépend donc pas de son contenu. Un min-width ou un max-width ne changeront pas ce comportement de base (ils limiteront juste la largeur que peut prendre l'élément). Pour obtenir un bloc dont la largeur va se restreindre à celle de son contenu et grandir en fonction de celui-ci, il faut passer par un rendu de type tableau, donc display:table en CSS. Éventuellement, display:inline-block peut être intéressant, de même qu'un float:left dans une moindre mesure.