Div en float:right qui sort de son conteneur

Version imprimable

Bonjour à tous,

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

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 ?)
http://nsa25.casimages.com/img/2011/...1859355784.png

Merci à tous d'avance pour votre aide ;).

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

10/05/2011, 14h18
Bisûnûrs

Un petit tour dans la FAQ :
http://css.developpez.com/faq/?page=...ment_flottants
10/05/2011, 14h23
Pauloscorps

Quelle rapidité !

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

Encore merci, et désolé du dérangement du coup :oops:
10/05/2011, 14h52
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.
10/05/2011, 14h56
fallais

Avec les marges peut-être ?
(Je ne vois pas ton image, pourrais-tu la mettre en PJ ?)
10/05/2011, 14h58
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.
10/05/2011, 14h59
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.
10/05/2011, 15h09
fallais

Si tu veux pas que le div dépasse du conteneur global, essaye overflow: hidden;
Dans le conteneur global biensur ;)
10/05/2011, 15h11
Bisûnûrs

Il n'existe aucun moyen sur IE 6 7 8, à part refaire un tableau de mise en page.
10/05/2011, 15h14
fallais

Citation:

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 ? ^^
10/05/2011, 15h20
Pauloscorps

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

@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 :aie:
10/05/2011, 15h27
fallais

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.