[CSS 2] Div en float:right qui sort de son conteneur

[Pauloscorps]

Bonjour à tous,

J'ai un petit problème assez urgent à résoudre en CSS, je compte donc sur vous pour m'aider .

Voici donc mon CSS :

Code :

1
2
3
4
5
6
7
8
 
.corpsArticle { background:green; font-size:80%; width:652px; height:auto; margin-top:0px; margin-left:258px; min-height:650px;
}
.produit { background:yellow; width:622px; height:auto; padding-left:15px; padding-right:15px; padding-top:0; margin-top:20px; }
.produit p { font-size:100%; margin:0; padding:0; }
.produit #texte { background:orange; width:450px; height:auto; padding:0; margin:0; }
.produit #texte p { font-size:100%; margin:0; padding:0;}
.produit #photo { background:pink; width:157px; border:none; float:right; }

Et l'architecture HTML :

Code :

1
2
3
4
5
6
7
8
9
10
11
 
<div class="corpsArticle">
     <div class="produit">
          <div id="photo">
               <img src="monimage.jpg"/>
          </div>
          <div id="texte">
               <p> du blablabl </p>
          </div>
     </div>
</div>

Comme un dessin sera plus explicite qu'un long et ennuyeux paragraphes, en voici un (magnifique non ?)


Merci à tous d'avance pour votre aide .

Petite précision : Ce ne sont pas les couleurs de mon site hein !

[Bisûnûrs]

Un petit tour dans la FAQ :
http://css.developpez.com/faq/?page=...ment_flottants

[Pauloscorps]

Quelle rapidité !

Merci infiniment, cela marche parfaitement, pourtant j'avais chercher sur le forum et je n'avais pas pensé à la FAQ .

Encore merci, et désolé du dérangement du coup

[Pauloscorps]

Euh, une petite question subsidiaire ^^

Comment puis-je centrer verticalement le bloc orange par rapport au rose (ou au jaune peu importe, ils font la même hauteur) ?

J'ai essayé vertical-align:middle, et la technique avec le display:inline, mais cela ne fonctionne pas.

Merci d'avance.

[Elwyn]

Avec les marges peut-être ?
(Je ne vois pas ton image, pourrais-tu la mettre en PJ ?)

[Bisûnûrs]

Il y a la technique du display:table-cell sur le conteneur avec un vertical-align:middle dessus également, mais à n'utiliser que si tu ne comptes pas avoir de rétrocompatibilité IE6-7-8 ..
Impossible à faire autrement que part tableau sinon.

[Pauloscorps]

@Elwyn
J'ai pensé aux marges effectivement, mais je ne vois pas comment faire puisque la hauteur de mon bloc jaune est en automatique (la taille des photos variant).

Voici un lien vers mon image : http://www.casimages.com/img.php?i=1...1859355784.png

@Bisûnûrs
J'ai absolument besoin d'une compatibilité à partir d'IE 6 puisqu'il s'agit d'un site d'entreprise, qui compte 49% de ses visites par IE7 et inférieur.
En revanche, j'ai une feuille de style spécifique à IE, donc s'il existe un moyen pour IE également, pourquoi pas.

[Elwyn]

Si tu veux pas que le div dépasse du conteneur global, essaye overflow: hidden;
Dans le conteneur global biensur

[Bisûnûrs]

Il n'existe aucun moyen sur IE 6 7 8, à part refaire un tableau de mise en page.

[Elwyn]

Envoyé par Elwyn

Si tu veux pas que le div dépasse du conteneur global, essaye overflow: hidden;
Dans le conteneur global biensur

Mais le problème de l'image que tu m'as mis en lien est résolu ou pas du coup ? ^^

[Pauloscorps]

@Elwyn
Oui oui, cf la première réponse de ce topic en fait

@Bisûnûrs
Bon ben merci à toi, je vais essayer de mettre un margin-top qui s'adapte le mieux possible alors, pas le choix

[Elwyn]

Il faut que tu t'arranges pour fixer la taille de tes éléments alors, tu ne pourras pas résoudre ton problème sinon.