28173 sujets

CSS et mise en forme, CSS3

Incompréhension de overflow:hidden dans les éléments flottants

Bonjour,
Je ne comprends pas la différence entre cette page :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
		<title>coucou</title>
		<style>
			.toto {
				width: 100px;
				height: 100px;
				border: 1px solid black;
				float: left;
			}
			.tata {
				width: 100px;
				height: 50px;
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<div class="toto">
			toto 1
		</div>
		<div class="toto">
			toto 2
		</div>
		<div class="tata">
			tata
		</div>
	</body>
</html>

et la même en ajoutant overflow: hidden; dans la classe tata.

Pourquoi est-ce que l'ajout de overflow: hidden pousse bien la div tata sur la droite...
Bonjour !

Personellement l'ajout de overflow ne pousse de DIV tata sur la droite....d'ailleurs il n'y a aucune raison que ce comportement ait lieu avec seulement le mot tata, qui est tres court et qui ne necessite donc pas de overflow ....


Bref, peut tu préciser, iou donner un exemple en ligne ou une url ou on peut voir ce problème ?

est ce que c'est valable pour plusieurs navigateurs ?

EDIT : est ce que tu parles d'un petit espace de 2 px environ qu'il y a entre toto2 et tata ?
Modifié par RoseGrenouille (09 Mar 2007 - 15:07)
RoseGrenouille a écrit :
Personellement l'ajout de overflow ne pousse de DIV tata sur la droite....

L'ajout de la propriété overflow avec les valeurs "auto" ou "hidden" crée un contexte de formatage qui enlève au bloc div.tata la propriété d'être survolé par les flottants.

En temps normal, un flottant ne repousse que le contenu des blocs (textes, éléments de type en-ligne). Si les blocs créent un contexte de formatage, ils sont eux-même repoussés par les flottants.

Voir aussi : Qu'est-ce qu'un contexte de formatage ?
(Attention, serveur un peu à la peine.)
Bonjour,
Sous Firefox (je n'ai pas IE sous la main pour tester) tata s'affiche en dessous de toto 1 et toto 2 quand je ne mets pas overflow: hidden. La bordure de tata elle est superposée à celle de toto 1.
L'ajout de overflow: hidden "corrige" ce comportement.

Edit:
Merci pour ce lien Florent.
Modifié par djib (09 Mar 2007 - 15:34)
RoseGrenouille a écrit :
@MATMAT : ah nnnnoooooooooooooon pas encore le layout !



ben si.

Sinon, de quoi vivraient les supposés experts ? D'amour et d'eau fraîche Smiley rolleyes ? Ce n'est pas leur trip.
Modifié par Laurent Denis (09 Mar 2007 - 17:52)
Bonjour,
Merci je crois que c'est un peu plus au clair dans ma tête.

Sinon en parlant de layout, vous parlez de "display" ou pas du tout ?
Sujet clos
Aller à