[résolu] Positionnement float right et left avec bloc texte

Bonjour tout le monde,

J'aimerai avoir ce résultat avec un div flottant à droite et un autre en right plus bas dans le texte :



Pour les 2 premiers div je sais faire mais pour le troisième je sèche pour les propriétés en css ?

Dans le code html je mets le div1 float right en premier, puis le div normal du texte : le div3 float right se mets où ?

Merci pour votre aide...
Modifié par idinfo68 (20 Mar 2009 - 08:28)

aussi...

Personne n'a d'idée ?

Hello

Je n'ai pas bien compris, ton 3ème bloc est à gauche, pas à droite ?

Fait-il partie du div1 ou pas ? En fait, tu utilises chaque bloc pour faire quoi ?
Modifié par mistike (02 May 2009 - 12:08)

mistike a écrit :
Hello

Je n'ai pas bien compris, ton 3ème bloc est à gauche, pas à droite ?

Oui, à gauche pour contenir une image plus bas dans le texte du div2

a écrit :

Fait-il partie du div1 ou pas ?

Non, il fait partie du div conteneur mais pourra être déplacé si nécessaire pour le résultat voulu

a écrit :

En fait, tu utiliser chaque bloc pour faire quoi ?

div1 : image à droite
div2 : texte uniquement qui doit entourer les images
div3 : image à gauche

En visuel cela donnerai ceci :
Modifié par idinfo68 (20 Mar 2009 - 06:52)

J'ai trouvé une solution qui tient la route!

En plaçant le div3 flottant dans le div2 du texte à l'endroit voulu.
Ca fonctionne et le texte entoure et contourne bien les div flotantes.

Code HTML

<div class="conteneur">
  
	<div class="div1">image div1 à droite en haut</div>
 	
  	<div class="div2">
            BlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBla
	<div class="div3">image div3 à gauche dans le texte</div> 
            BlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBla
	</div>
    
    <div class="spacer"></div>
</div>
</body>
</html>

CSS

.conteneur{
	width: 700px;
	background-color: gray;}
.div1{
	float: right;
	background-color: aqua;
	width: 200px;
	height: 150px;
	margin-left: 15px;
        margin-bottom: 15px;}
.div2{	
	background-color: gray;
	padding:20px;}
.div3{
	float: left;
	background-color: #adff2f;
	width: 200px;
	height: 200px;
	margin-right: 15px;
	margin-bottom: 15px;
	margin-top: 15px;}
.spacer {
        clear: both;}

Modifié par idinfo68 (20 Mar 2009 - 07:39)