Dépassement horizontal DIV

**hair_peace** · 04/02/2008, 15h50

Bonjour à tous !!!!

Je créé un simple div dans un body, avec un mot très long afin de voir comment le div va réagir.
Suprise: sur FF et Opera, le contenu sort !!!! (pas sur IE mais bon, c'est IE...

)

Est-ce normal ?
N'y a-t-il pas moyen que le div s'allonge tout seul en fonction de son contenu ?

Mon code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!-- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> -->
<!-- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> -->
<HTML>
 
<HEAD>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
	<TITLE></TITLE>
	<STYLE type="text/css">
		html{}
		body{}
		.div_normal{background: #CCCCCC;}
	</STYLE>
</HEAD>
 
<BODY>
	<DIV CLASS=div_normal>
		aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
	</DIV>
	<DIV><BR></DIV>
	<DIV CLASS=div_normal>
		aaaaaaaaaa
	</DIV>
</BODY>
 
</HTML>

Merci !!!!!
++
HH

**Bisûnûrs** · 04/02/2008, 15h53

Oui, c'est normal.

Pour que le div s'allonge, il faut lui spécifier une longueur minimum, soit un min-width (non compris par IE6 qui de toute façon gère le width comme un min-width).

**hair_peace** · 04/02/2008, 16h01

Merci Bisûnûrs !!!

Mais, le fait de mettre une largeur minimum ne force pas le div à s'allonger.
Si min-width: 100px et que le contenu en fait 3000, le div ne va pas plus loin que ses "100%"...

Autre idée ?

**Bisûnûrs** · 04/02/2008, 16h11

Et min-width:100% ?

**hair_peace** · 04/02/2008, 16h35

Non plus...

en fait, je pense que le div ne force pas sur le body. Le contenu dépasse mais pas les bordures ni le background.

Il faut mettre une table avant. Celle-si ne force pas mais dépasse "normalement" ce qui permet au div de s'étendre tant qu'il veut.

Je ne sais pas pourquoi, c'est un constat.
++
HH

**kaiser59** · 05/02/2008, 00h31

Salut,

C'est normal, que ton contenu sorte du div dans FF c'est simplement pcq ton contenu ne contient pas d'espace. Comme je l'ai dis dans un autre post FF étant bon élève, pour lui le div fait la taille qu'on lui a demandé ou la taille de base si on ne précise pas ici, 100% - les marges et padding par défaut

Comme ton contenu ne contient pas d'espace, aucun navigateur à ma connaissance ne renverra tes aaa... à la ligne par contre ajoute un espace au milieu de tes aaa tu verras que tes aaa rentrerons dans ton div

**Candygirl** · 05/02/2008, 17h08

Envoyé par hair_peace

(pas sur IE mais bon, c'est IE...

)

Petite rectification, pas sur IE6 et moins, pour la raison qui t'a été donnée plus haut. Par contre IE7 réagit correctement.

Envoyé par hair_peace

Est-ce normal ?

Oui, comme expliqué plus haut, par défaut, en width:auto (valeur par défaut), un élément de type block, normalement dans le flux, va occuper le maximum de place à disposition dans son parent et donc aura au maximum la taille de l'élément racine, soit la fenêtre de visualisation.

Envoyé par hair_peace

N'y a-t-il pas moyen que le div s'allonge tout seul en fonction de son contenu ?

Il y a plusieurs propriétés qui permettent de modifier ce comportement par défaut. Les élément flottants, ceux positionnés en absolute, ou encore d'un autre type que block, par exemple table, verront, eux, leur largeur s'adapter à leur contenu. Tu peux tester en ajoutant tour à tour

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

float:left;

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

position:absolute;

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

display:table;

à ton .div_normal, à part la dernière option sur IE7 (pas supporté par IE) tu devrais obtenir le résultat souhaité.

**hair_peace** · 06/02/2008, 10h28

Merci kaiser59 et Candygirl !!!

C'est super, j'ai tout ce qu'il me faut:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
texte_qui_sort{}
texte_masqué{overflow: hidden ou auto;}
texte_qui_force{float: left ou right;}

je n'utilise pas "display:table;" puisque non supportée par IE7
ni absolute car le div devient indépendant des largeurs parentes.

Encore merci à tous pour votre aide
A bientot

HH

Dépassement horizontal DIV

HTML

Vue hybride

Discussions similaires

Partager

Partager