Comment créer un espace entre le texte qui entoure un div et le div ?

**Alexandrebox** · 20/03/2009, 12h25

Bonjour,

J'ai créé du texte (texte align justify) et un div que le texte entoure de cette manière :
Voir l'image ci-jointe

Comme vous avez pu le constater, il n'ya pas d'espace entre le texte et le div de couleur jaune. Ce n'est pas joli. ça fait brouillon. J'aimerais éviter que le texte soit coller au div Quelque chose dans le genre padding-right = 10 par exemple Mais comment y procéder pour avoir le résultat souhaité?

Voici mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans titre</title>
<style type="text/css">
 
#conteneur
{
position : relative ;
background : #FFFFFF ;
color: #000000;
float:left;
width : 100% ;
}
 
.bloc
{
float: right ;
background : yellow ;
color:black;
border : 1px solid red ;
width : 350px ;
}
 
.texteformaterInfo {
    width: 740px;
	background-color:#FFFFFF;
	margin-top: 20px;
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: 20px;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 11px;
   color: #000000;
   text-align: justify;
}
</style>
 
</head>
 
<body>
<div class="texteformaterInfo">
	<div id='conteneur'>
La version 8 du navigateur de Microsoft, Internet Explorer, est téléchargeable en France ce jeudi soir, depuis 18 heures. Disponible dans 25 langues dont le français, il télécharge les pages 50% plus vite que la précédente version selon la firme de Redmond. Le n°8 intègre également de nouvelles fonctions. En matière de sécurité, il est, entre autres, doté de l'outil "SmartScreen" qui serait capable de bloquer un plus grand nombre de sites malveillants. Au niveau du contenu, "WebSlices", permet d'agréger les parties de nos sites préférés (forme de flux RSS) et les accélérateurs donnent accès à des services (traduction, 
 
	  <div class='bloc'>
Appuyez sur la touche CTRL tout en cliquant sur les liens (ou utilisez le bouton central de la souris). 
Cliquez sur n’importe quel onglet à l’aide du bouton central de la souris afin de le fermer. 
Appuyez sur ALT+ENTRÉE depuis la barre d’adresse ou la zone de recherche pour ouvrir le résultat dans un nouvel onglet.  
		 </div>
 
La version 8 du navigateur de Microsoft, Internet Explorer, est téléchargeable en France ce jeudi soir, depuis 18 heures. Disponible dans 25 langues dont le français, il télécharge les pages 50% plus vite que la précédente version selon la firme de Redmond. Le n°8 intègre également de nouvelles fonctions. En matière de sécurité, il est, entre autres, doté de l'outil "SmartScreen" qui serait capable de bloquer un plus grand nombre de sites malveillants. Au niveau du contenu, "WebSlices", permet d'agréger les parties de nos sites préférés (forme de flux RSS) et les accélérateurs donnent accès à des services (traduction, recherche, etc.) sur le passage de la page consultée. Peut-être cette nouvelle mouture redonnera-t-elle quelques parts de marché au navigateur face à une concurrence montante!
	</div>
</div>
</body>
</html>

D'avance je vous remercie pour votre aide.

**GihefBey** · 20/03/2009, 14h51

Bonjour,

Avec des margin ?

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
.bloc {
  float: right;
  background : yellow;
  color: black;
  border : 1px solid red;
  width : 350px;
margin : 16px 0 8px 16px; /* par exemple */
  }

-

**Alexandrebox** · 20/03/2009, 22h03

Je me suis mal fait comprendre.
Je ne parlais pas du texte dans le div jaune. Je parlais du texte qui entoure le div jaune.

Merci qu'en même pour ton aide.

**GihefBey** · 20/03/2009, 22h09

Le complément d'information n'apporte rien de nouveau.
Fais un dessin, qu'on voie ce que tu cherches.

Par exemple : un dessin.

-

**Alexandrebox** · 21/03/2009, 16h15

Excuse-moi. Je n'avais pas testé ce que tu avais fait. je partais du principe que vue que ton margin tu l'as fait dans le code bloc{} alors margin sera fait dans le rectangle jaune.

Après l'avoir testé, j'ai des espaces que je cherchais exactement autour du div.

Merci beaucoup je vais mettre résolu.

Mais une dernière petite question, est ce que c'est compatible sur Mac utilisant safari ?

enconre merci

**12monkeys** · 21/03/2009, 17h19

Bonjour

Envoyé par Alexandrebox

est ce que c'est compatible sur Mac utilisant safari ?

Si margin n'est pas compatible, alors rien n'est compatible...

Si tu n'as pas de moyen de tester ton site, tu peut utiliser ce service : http://browsershots.org/