Position d'un div dans un div (simple ?)

Bonjour,

Pour faire simple :

j'ai un div dans lequel je veux insérer un autre div mais en haut à droite de celui-ci.

niveau code HTML, j'ai :

<div id="global">
<div id="left">

   mon texte  blah blah blah blah
    <div id="right">
	texte2
     </div>
</div>
</div>

et niveau css :

#left{

	float:left;
	border:1px solid red;


}

#right{
	float:right;
	border:1px solid black;
	white-space:nowrap;
	padding:0;
	margin:0;
	vertical-align:top;
	position:relative;
}
#global{
	margin-left: auto;
 	margin-right: auto;
	width:500px;
	position:relative;
	border:2px solid green;

}

Le problème , c'est d'arriver à trouver le bon code css pour #right pour afficher mon texte à savoir "texte2" en haut à droite dans le cadre #left



Existe-t-il une solution ?

Merci d'avance

ps : je précise que mon code "<div id="right"> ... </div>" peut se trouver au milieu du texte du bloc #left mais s'afficher tjrs au même endroit.
Modifié par Greg221 (29 Jun 2007 - 17:02)

Salut.

C'est dans ton code html qu'il doit se trouver avant ton blabla. Sinon le blabla prend toute la largeur disponible et il ne reste plus rien pour ton div. Qui se retrouve donc en-dessous.

<nicolas> a écrit :
Salut.

C'est dans ton code html qu'il doit se trouver avant ton blabla. Sinon le blabla prend toute la largeur disponible et il ne reste plus rien pour ton div. Qui se retrouve donc en-dessous.

Salut,

Oui, je sais que si on place le #right avant le "blah blah", la position est correcte.

Cependant, je dois faire en sorte que le bloc "#right" puisse se situer n'importe où dans mon texte "blah blah" et qu'il s'affiche toujours au même endroit

Exemple :

si j'écris :

texte blah <div id="right"> ... </div> blah blah

cela m'affichera toujours mon bloc #right en haut à droite.
Modifié par Greg221 (29 Jun 2007 - 16:52)

Bonjour,
dans ce cas tu dois employer le positionnement absolue plus robuste que
les marge verticales négative sur un flottant:
Lire les commentaires CSS

#left{
	float:left;
        position:relative; /*sert à identifier ce bloc comme référence
pour l'affichage de ses enfants en position absolue*/
	border:1px solid red;
}

#right{
        position:absolue;
        top:0;
        right:0;
 	border:1px solid black;
	white-space:nowrap;
	padding:0;
	vertical-align:top; /* a supprimer :  ne s'applique qu'aux TD et aux éléments inline*/
	position:relative; /*a supprimer - pourquoi ce positionnement?*/
}

Modifié par Hermann (29 Jun 2007 - 17:05)

Hermann a écrit :
Bonjour,
dans ce cas tu dois employer le positionnement absolue plus robuste que
les marge verticales négative sur un flottant:
Lire les commentaires CSS

Merci (et désolé pour les lignes incorrectes) .
Cela dit, j'avais déjà testé cette solution et le problème c'est qu'on se retrouve avec le cadre #right (en absolute) qui se supperpose sur le #left (donc on a du texte sur du texte). J'ai cherché un moyen de faire en sorte qu'il puisse "s'intégrer au texte" du bloc parent mais je n'ai pas trouvé (le mode display:inline n'a pas l'air de fonctionner).

le résultat est de cette forme :



voici le code css nettoyé avec ce cas :

#left{
	float:left;
	border:1px solid red;
	position:relative;
}

#right{
	top:0;
        right:0;
	position:absolute;
	float:right;
	border:1px solid black;
	padding:0;
	margin:0;
}
#global{
	margin-left: auto;
 	margin-right: auto;
	width:500px;
	border:2px solid green;
}

Modifié par Greg221 (29 Jun 2007 - 17:21)

Ok alors la CSS corrigée et commentaire à lire:
Tu ne peux pas combiner un psoitionnement absolue ou fixed avec un comportement flottant (propriété float qui prends alors la valeur none).

La solution que je te propose ne permettra pas de faire couler le texte
de left autour du right mais servira uniquement à décaler le txte vers le gauche (à l'aide d'un padding-right)
Sinon il faut revenir à ta première methode avec une marge haute négative
au niveau du right pour le faire remonter.

#left{
	float:left;
	border:1px solid red;
	position:relative;
        padding-right: largeur de right + marge;
}

#right{
	position:absolute;
	top:0;
        right:0;
	border:1px solid black;
	padding:0; /*aucun effet*/
	margin:0; /*aucun effet*/
}
#global{
	margin-left: auto;
 	margin-right: auto;
	width:500px;
	border:2px solid green;
}

Modifié par Hermann (29 Jun 2007 - 17:45)

Merci beaucoup.

Donc, si j'ai bien compris, il n'existe aucune solution de placer le bloc #right en haut à droite d'un div (#left) avec le texte (de #left) qui s'aligne automatiquement suivant la largeur de #right.

En effet, avec la méthode "marge haute négative", on se retouve toujours avec le texte qui se supperpose.
La seule méthode qui fonctionne, c'est celle que vous proposez, c'est à dire mettre un padding-right sur #left.

Le problème de cette dernière méthode c'est qu'elle ne fonctionne que sur un #right de taille fixe. Or dans mon application, le bloc #right doit avoir une largeur variable.

Hermann a écrit :
Ok alors la CSS corrigée et commentaire à lire:
Tu ne peux pas combiner un psoitionnement absolue ou fixed avec un comportement flottant (propriété float qui prends alors la valeur none).

La solution que je te propose ne permettra pas de faire couler le texte
de left autour du right mais servira uniquement à décaler le txte vers le gauche (à l'aide d'un padding-right)
Sinon il faut revenir à ta première methode avec une marge haute négative
au niveau du right pour le faire remonter.

Hello,

Il n'y a pas de solution «naturelle» en CSS pour ce que tu veux faire. La solution idéale serait bien de placer #right en premier dans le code, mais il semble que tu ne puisse pas changer l'ordre dans le code HTML ?

Greg221 a écrit :
Donc, si j'ai bien compris, il n'existe aucune solution de placer le bloc #right en haut à droite d'un div (#left) avec le texte (de #left) qui s'aligne automatiquement suivant la largeur de #right.

Si, on peut placer #right en premier dans le code HTML...
Modifié par Florent V. (02 Jul 2007 - 10:03)

ben le but, c'est de pouvoir changer la position du bloc #right pour tous mes "articles" en modifiant simplement le fichier css (si demain je veux l'afficher en bas à gauche par exemple....)

une solution serait d'utiliser du javascript...
Exemple :

function modif()
{
	r = document.getElementById("right");
	l = document.getElementById("left");
	l.style.paddingRight = r.offsetWidth;
}

Florent V. a écrit :
Hello,

Il n'y a pas de solution «naturelle» en CSS pour ce que tu veux faire. La solution idéale serait bien de placer #right en premier dans le code, mais il semble que tu ne puisse pas changer l'ordre dans le code HTML ?


Si, on peut placer #right en premier dans le code HTML...

Modifié par Greg221 (02 Jul 2007 - 10:43)

Greg221 a écrit :
...(si demain je veux l'afficher en bas à gauche par
exemple....)

A priori c'est une mauvaise stratégie, c'est souvent signe d'un manque de sèrieux et de professionnalisme, mais je dis bien a priori, je ne connais pas le projet.
Changer l'emplacement d'un contenu peut nuire à l'expèrience d'un utilisateur fidèle qui prend ses marques dès la première visite.

Greg221 a écrit :

une solution serait d'utiliser du javascript...

Javascript n'est pas fait pour ce genre de chose et il ne faut pas oublier qu'il y a environ 5% d'internautes ayant Javascript désactivé.
Modifié par Hermann (02 Jul 2007 - 12:12)

Greg221 a écrit :
ben le but, c'est de pouvoir changer la position du bloc #right pour tous mes "articles" en modifiant simplement le fichier css (si demain je veux l'afficher en bas à gauche par exemple....)

Si tu changes aussi drastiquement l'emplacement de deux éléments, tu modifies l'ordre de lecture. Dans ce cas, on modifiera carrément le document (ordre des éléments dans le flux HTML), et pas juste la surcouche de présentation (CSS).

Au passage, si tu veux placer ton élément en bas à gauche plus tard, tu aurais intérêt à ne pas lui donner l'identifiant "right".

Quant aux modifications du code HTML... du moment que tu travailles avec des pages dynamiques (PHP, système de templates, etc.), les modifications pourront se faire facilement. Ce n'est donc pas un enjeu de productivité ou de maintenance très important.