18041 sujets

Questions générales et questions de débutants

[Débutant] Un float qui dépasse d'un conteneur

Salut à tous, mes connaissances en div et autres joyeustés du web est assez maigre, eet malgré mes recherches, je ne trouve de rponse à mon problème. C'est pourtant simple, j'ai un premier div qui contient un div aligné en float: left et une marge négative.
Le résultat est que ce div flottant est coupé par son conteneur ce qui fait qu'une partie seulement n'est visible. Ce problème n'appariaît que sous IE, Firefox semble faire dépasser naturellement les floats.

Quelqu'un aurait il une idée, ou une solution un peu moins farfelue que les discus d'expert que j'ai trouvées sur le forum? merci bcp !!
Administrateur
Scritch a écrit :
Salut à tous, mes connaissances en div et autres joyeustés du web est assez maigre, eet malgré mes recherches, je ne trouve de rponse à mon problème.

Hello et bienvenue,

Ton problème correspond mot pour mot à un point de la FAQ qui le résoud.
En fait, ce n'est pas un problème mais le comportement normal du positionnement flottant. Il faut donc trouver des astuces pour dévier de ce comportement attendu, la FAQ propose plusieurs solutions.
Merci pour cette réponse rapire, malheureusement, j'ai presque tout essayé, et cela ne change rien:
- Le clear both n'étend pas, puisque mes margin sont négatives et horizontales,

- Le after n'est pas dispo sous IE or c'est justement sous IE que mon problème se pose

-Les autres sont en anglais... Smiley biggol

Bon je vais réessayer le clear en en mettant un peu partout autour de mes floats, mais bon...
Administrateur
Scritch a écrit :

- Le clear both n'étend pas, puisque mes margin sont négatives et horizontales,

OK, mais à un moment il devient difficile de deviner le problème sans le rencontrer.
Tu aurais plus de chance en montrant la page en question Smiley cligne
Oki voila, le problème est synthétisé... C'est vraiment tout bête mais je ne trouve vraiment pas de solution!
Regardez la différence entre Firefox et IE (6 en tout cas), apparamment c'est le problème de flux sortant des float dont parle la FAQ, mais si vous pouviez me montrer comment changer ca sur cet exemple, ca m'aiderait vraiment.

La page HTML:
<div class="diagramme">

<div class="op1">
hello
</div>


</div>


La feuille de style associée:


.diagramme
{

width:694px;
height:290px;
margin-left: 20px;
padding: 0;
border: 1px solid #000000;

}


.op1
{
float: left;
width:160px;
height:20px;
margin-left: -20px;
margin-top: 45px;

border: 1px solid #000080;

}

Modifié par Scritch (29 Dec 2006 - 12:39)
Oui je voudrais qu'on le voit totalement, soit en étendant le conteneur, soit en faisant dépasser le float. Du moment qu'on le voit... Smiley confus
Vu qu'il s'agit d'une boîte de dimensions fixes, j'utiliserais le positionnement absolu, plutôt qu'un float avec une marge négative Smiley ohwell : 
.diagramme {
   position: relative ;
   ...
}
.op1 {
   position: absolue ;
   left: -20px;
   width: 160px ;
   height: 10px ;
   margin: 0 ;
   border: 1px solid #000080 ;
}
Le problème est que je dois répéter cet agencement sur une autre page, avec des dimensions de boite et de position différente (j'ai pleins de boite, 'est en fait un diagramme que je dessine...), donc je ne peux faire d'absolute à moins de créer tout plein de feuilles CSS en changeant les valeurs mais c'est pas top... Smiley decu
Modifié par Scritch (29 Dec 2006 - 13:07)
Est-ce que tu peux modifier les marges du conteneur ? En utilisant par exemple 
.diagramme {
   margin-left: 0 ;
   padding-left: 20px ;
   ...
}
.ol1 {
   float: left ;
   margin: 0 ;
   ...
}
Non plus, lol désolé...Le problèeme est que mon conteneur ontient un arrière-plan et il ne doit pas bouger. Donc au final, la seule solution est que les float dépassent du flux du conteneur, car ca ne m'arrange pas de changer le conteneur lui-même.
Ptet j'en dmande trop...Mais bon, Firefox le fait!!!
Sujet clos
Aller à