Problème d'étirement de <div>

[gontran]

Bonsooir le hub

voila un peu de css :

.grand {
	width:760px;
	margin:0 0 10px 0;
	padding: 0 0 5px 0;
	border:  solid 1px #8f8fff;
}
.grand h1{
	background:url(../images/fond_h1_article.jpg) repeat-x;
	font-size: 95%;
	margin: auto;
	padding: 0 0 0 3px;
	line-height: 160%;
	color: #000
}
.petit {
	width:245px;
	margin: 0 0 0 5px;
	padding:auto;
	border:  solid 1px #8f8fff;
	float:left;
}
.petit h1{
	background:url(../images/fond_h1_article.jpg) repeat-x;
	font-size: 90%;
	margin: auto;
	padding: 0 0 0 3px;
	line-height: 160%;
	color: #000
}

et maintenant mon php

		echo '<div class="grand">';
		echo '<h1>L\'annuaire</h1>';
		echo '<div class="petit">';
		echo '<h1>Le top 5</h1>';
		//affichage des 5 derniers inscrits
		$req1=mysql_query("select nom from annuaire order by date_ajout desc limit 5") or die (mysql_error());
		while ($res1=mysql_fetch_array($req1)) {
			echo '<p>'.$res1['nom'].'</p>';
			}
		echo '</div>';
		echo '<div class="petit">';
		echo '<h1>Les + visités</h1>';
		//affichage des plus visiter
		$req2=mysql_query("select nom from annuaire order by nb_clic asc limit 5") or die (mysql_error());
		while ($res2=mysql_fetch_array($req2)) {
			echo '<p>'.$res2['nom'].'</p>';
			}
		echo '</div>';
		echo '<div class="petit">';
		echo '<h1>Le top 5 catégorie</h1>';
		echo '</div>';
		echo '</div>';

le probleme est le suivant :

j'ai 3 div "petite" aligner sur la meme ligne et contenue dans une div "grand"

pas de reglage en hauteur...

les div "petit" me serve a insérrer des données sur ma home et donc la taille varie..

par contre le div "grand" ne suis pas la taille des div "petit"

est ce que c'est assez clair ??

Merci

[aymericj]

Bonjour Gontran,

L'ajout d'un overflow:auto à ta classe .grand suffira à régler ton problème :

.grand {
	width:760px;
	margin:0 0 10px 0;
	padding: 0 0 5px 0;
	border:  solid 1px #8f8fff;
	overflow:auto;
}

EDIT : oops je viens de voir que ma réponse a été un peu courte.

Tu n'auras aucun problème sous FF ou opera ou tout autre navigateur récent, par contre attends toi à des problèmes sous IE, principalement du au bug des 3 pixels.

Penses a reduire légèrement la taille de tes petits blocs pour que ça passe sous IE.

Bon courage,

Aymeric.

Modifié 2 Septembre 2006 par aymericj

[ghost]

Bonjour ;

Avec un petit hack pour IE

.grand {
	width:760px;
	margin:0 0 10px 0;
	padding: 0 0 5px 0;
	border:  solid 1px #8f8fff;
	overflow: visible; /* pour IE*/
	height: 1%;
}

html>body .grand { /* pour les autres */
overflow: hidden
}

Attention à prendre en compte la taille des bordures pour IE sinon un de tes blocs passera dessous (il doit te manquer 1px sur le width de .grand)

[ajpg]

Hello à tous,

@ aymericj -> pourquoi le bug des 3 pixels ? ce ne me semble pas être le genre de cas où cela se produit.

En revanche il faut faire attention au doublement des marges et ajouter display:inline à « .petit »

@ ghost : pourquoi utiliser ce hack ? Cela me semble inutile vu que l'élément est déjà doté de layout grâce à la propriété width

Modifié 2 Septembre 2006 par ajpg

[aymericj]

ajpg,

You're welcome, réponse trop rapide de ma part. Merci de me corriger.

Et petit message perso : Arrettez les hacks! C'est sale, c'est laid, c'est inutile et la plupart des problèmes sous IE sont facilement contournables avec un peu d'astuce.

++

Aymeric

[ghost]

Bonjour,

Effectivement autant pour moi ce hack n'est pas nécéssaire dans ce cas !! et seulement utile si with n'est pas employé.

Je suis allé plus vite que la musique ...