Podistionnement d'un div comme une img

Bonjour,

Dans un div j'ai une balise img que j'aligne à droite :

<img id="photo" width="380" align="right">

Le texte contenu dans le div suit les contours de l'image, c'est à dire passe à la ligne quand il arrive sur le bord gauche de l'image puis s'affiche en dessous quand le bas de l'image est atteint.

Je voudrais la même chose en remplaçant img par div.

div.verte {
        position: relative;
        width: 700px;
        height: 500px;
        background-color: green;
}

div.jaune {
        position: absolute;
        width: 320px;
        height: 280px;
        background-color: yellow;
        right: 0;
}

<div class="verte">
<div class="jaune">
Texte dans jaune.
</div>
Texte dans vert.
</div>

Le texte dans le div vert passe en dessous du div jaune...

Est-ce possible ?

Merci,
Frédéric.
Modifié par fmadrolle (18 Jan 2008 - 09:52)

Bonjour,

Deux solutions, plus ou moins adaptées suivant ce que tu veux faire exactement:
- display: inline;
- float: left ou float: right.

Je voudrais que le mot vert revienne à la ligne pour ne pas aller ce cacher sous le div jaune.

Les deux solutions que tu as proposées ne me permettent pas de faire ça, sauf si je l'ai mal utilisé...

Frédéric.
Modifié par fmadrolle (18 Jan 2008 - 10:59)

salut,
comme l'a dit florent V il suffit de mettre ton text jaune en tant que

float:right

et normalement tu obtiendra le resultat comme tu veux

fmadrolle a écrit :
Les deux solutions que tu as proposées ne me permettent pas de faire ça, sauf si je l'ai mal utilisé...

Tu l'as mal utilisé.

Vu ta capture d'écran, je pense que tu as dû utiliser float ou display: inline, mais en conservant le positionnement absolu qui n'est pas adapté à ce que tu veux faire et qui prend le pas sur les deux solutions que je propose.

Donc:

div.verte {
	width: 700px;
	min-height: 500px;
	background-color: green;
}
div.jaune {
	float: right;
	width: 320px;
	min-height: 280px;
	margin: 0 0 20px 20px;
	background-color: yellow;
}

(À priori, vu qu'il s'agit de blocs, display: inline n'est pas adapté ici.)
Modifié par Florent V. (18 Jan 2008 - 11:22)

par contre faut faire attention au dedoublement des marge sur IE et egalement le min-heit qui ne fontionne pas sous IE ^^

Florent V. a écrit :

Tu l'as mal utilisé.

C'est marrant je m'en doutais

Florent V. a écrit :
Vu ta capture d'écran, je pense que tu as dû utiliser float ou display: inline, mais en conservant le positionnement absolu qui n'est pas adapté à ce que tu veux faire et qui prend le pas sur les deux solutions que je propose.

float, mais effectivement en gardant l'absolu

En retirant la position absolute, plus de problème naturellement.

Pas bon de faire 36 choses en même temps....

Merci,
Frédéric.

hakkou a écrit :
par contre faut faire attention au dedoublement des marge sur IE et egalement le min-heit qui ne fontionne pas sous IE ^^

Attention, tu as données deux informations à moitié fausses en deux affirmations!

Le dédoublement des marges ne concerne qu'Internet Explorer 5 et 6 (bug corrigé dans IE7), et concerne uniquement les flottants qui ont une marge dans la même direction que leur flottement. De plus, dans une série de flottants seul le premier peut être victime de ce bug.
En clair, si j'ai un bloc flottant à droite qui ne jouxte pas d'autres flottants, la marge de droite de ce bloc dans IE6 sera doublée.
Dans l'exemple que j'ai donné, le bloc est flottant à droite mais n'a pas de marge à droite.

Quant au min-height, il fonctionne parfaitement... sous IE 7. Il n'est effectivement pas implémenté par IE 6.
Si j'ai utilisé min-height dans mon exemple de code ci-dessus, ce n'est pas tellement parce que cette propriété y est utile ou indispensable (ne connaissant pas le design à intégrer, je n'en sais rien), mais juste pour rappeler que c'est globalement une mauvaise pratique de figer en hauteur (via la propriété height) des blocs qui n'ont pas besoin de l'être.
Modifié par Florent V. (18 Jan 2008 - 14:29)

Oups desolé j'ai oublier de mentionner IE6
parce que tout simplement ca me semblait (à tort) logique que sa soit que IE 6 et qui plante et parce que je ne suis pas passé au 7 encore tout simplement parce que pas mal de bug ont été corrigé comme le min-height par exemple
Modifié par hakkou (18 Jan 2008 - 20:25)