Discussion :

[Janitrix]

Bonjour,

Afin d'agrandir automatiquement un conteneur qui contient plusieurs éléments float, j'utilise une technique désormais assez connue :

.list_icons li
{
overflow: hidden;
width: 100%;
}

Cet élément est le conteneur de mes floats. Le problème est le suivant : sur ces éléments flottant, j'ai un tooltip CSS (un span qui s'affiche lorsqu'on passe la souris dessus) et avec la propriété overflow:hidden, les tooltips sont cachés car hors de la zone du conteneur.

Quelqu'un sait-il comment régler ce problème plutôt gênant ?

[Candygirl]

Il te faut trouver une autre propriété créant un nouveau contexte de formatage, qui puisse s'appliquer à ton cas. Ici, un float semblerait pouvoir convenir vu le width de 100%.

[Janitrix]

Il te faut trouver une autre propriété créant un nouveau contexte de formatage, qui puisse s'appliquer à ton cas. Ici, un float semblerait pouvoir convenir vu le width de 100%.

En d'autres termes, ça donne quoi ?

Contexte de formatage ?

[Candygirl]

Attribuer l'overflow hidden (ou auto) est utilisé non pas pour sa raison première d'exister mais pour l'effet qu'il induit, soit la création d'un nouveau contexte de formatage. Ce nouveau contexte de formatage force la prise en compte du contenu des flottants par le parent, ce qui est une alternative à l'utilisation d'un div vide avec la propriété clear appliquée, comme on en utilisait souvent par la passé.

Si cette solution est intéressante parce qu'elle n'impose pas d'ajout dans le html elle-n'en est pas moins idéale puisqu'on attribue une propriété dont on n'a nul besoin et dont les effets peuvent être ennuyeux, comme dans ton cas.

L'overflow est souvent la plus utilisée parce que facile à mettre en oeuvre mais il existe d'autres propriétés qui crèent un nouveau contexte de formatage. Je te proposais un float parce que ton width de 100% me laisse penser que son utilisation est possible ici. Typiquement on ne pourrait pas l'utiliser sur un élément que l'on veut centré avec des margin auto. Autrement tu peux aussi essayer un display:table selon les cas (IE ne m'interprète pas mais vu que tu dotes l'éléments du layout avec ton width ce n'est pas un problème). Il faudra attendre css3 pour avoir une solution spécialement dédiée à cette problématique (peut-être avec la propriété clear-after ou encore une nouvelle valeur pour la propriété clear; à l'étude)

Je suis consciente de ne pas avoir donner de définition exacte à "nouveau contexte de formatage", parce que je n'en ai pas; j'attend que quelqu'un de plus compétant passe par là

Donc, essaie:

Code :

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

1
2
3
4
5
.list_icons li
{
float:left;
width: 100%;
}

[Janitrix]

Merci pour ces précisions

Alors, j'ai essayé ta proposition de

float: left

mais cela ne fonctionne pas, car j'ai plusieurs éléments li à la suite, et avec ta proposition, tous les li sortent du conteneur.

Avec display: table, ça fonctionne sur Firefox, IE7 et même IE6 (seul Firefox posait problème avant ton idée).

Merci encore