Dépassement horizontal DIV

Version imprimable

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...:marteau:)

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:

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

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

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).
04/02/2008, 16h01
hair_peace

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 ?
04/02/2008, 16h11
Bisûnûrs

Et min-width:100% ?
04/02/2008, 16h35
hair_peace

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
05/02/2008, 00h31
kaiser59

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 ;)
05/02/2008, 12h32
hair_peace

Merci pour les précisions kaiser59 !!!

C'est quand même dommage qu'il n'y ai pas la possiblité de définir un DIV comme étant "exensible" (ou alors je ne connais pas....)

Sinon je sais bien pour les aaaaaa... une autre mise en pratique serait une image très large, pas moyen de mettre d'espace au milieu ;)

Si qqun sait comme rendre un div "exensible", sinon je vais pas tardé à mettre "résolu"
++
HH
05/02/2008, 13h04
kaiser59

L'idéale serait de récupérer la valeur de la taille de ton image et de donner cette valeur à la taille de ton div.

Cela devrait être possible avec Javascript je pense ou javascript associé à php ?

Toutefois, se serait étonnant d'avoir un site qui s'adapte en fonction de la longueur de l'image :? C'est souvent en largeur que le site est extensible.
05/02/2008, 17h08
Candygirl

Citation:

Envoyé par hair_peace

(pas sur IE mais bon, c'est IE...:marteau:)

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

Citation:

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.

Citation:

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:

float:left;

Code:

position:absolute;

Code:

display:table;

à ton .div_normal, à part la dernière option sur IE7 (pas supporté par IE) tu devrais obtenir le résultat souhaité.
06/02/2008, 10h28
hair_peace
Merci kaiser59 et Candygirl !!!

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

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