Aligner 2 div en utilisant HTML to PDF

**alfred5** · 06/01/2015, 18h47

Bonjour;
j'ai utilisé html to pdf pour convertir mon fichier html en un fichier pdf; mais j'ai remarqué que j'ai pas pu d'aligner 2 div.
j'ai penché sur le le net en cherchant sur la méthode et je l'avais trouvé.
le problème c'est que le code fonctionne bien si j'affiche la page sans utiliser htmltopdf; mais lorsque j'utilise htmltopdf, mes 2 div s'affichent l'un en dessous de l'autre.

Code html :

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

1
2
3
4
<body>
	<div id="left_zone">Left Content</div>
	<div id="right_zone">Right Content</div>
</body>

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
body{
display:block;
width:500px;
}
 
#left_zone{
display:inline-block;
width:200px;
float:left;
}
#right_zone{
display:inline-block;
width:300px;
float:left;
}

**NoSmoking** · 08/01/2015, 23h01

Bonjour,
jamais testé mais essaies peut être avec un display:table-cell.

**miss_socrates** · 11/01/2015, 22h13

Envoyé par alfred5

mes 2 div s'affichent l'un en dessous de l'autre.

Code html :

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

1
2
3
4
<body>
	<div id="left_zone">Left Content</div>
	<div id="right_zone">Right Content</div>
</body>

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
body{
display:block;
width:500px;
}
 
#left_zone{
display:inline-block;
width:200px;
float:left;
}
#right_zone{
display:inline-block;
width:300px;
float:left;
}

C'est normal que les 2 div se superposent car il faut effectivement les placer en float:left mais la propriété display:block du body le contredit en les plaçant en bloc. Il ne faut plus répéter pour chaque ID la propriété display: inline(-block) puisque celle-ci est héritée du body.
Voici le code corrigé:

Code html :

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

1
2
3
4
<body>
	<div id="left_zone">Left Content</div>
	<div id="right_zone">Right Content</div>
</body>

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
body{
display:inline;
width:500px;
}
#left_zone{
width:200px;
float:left;
}
#right_zone{
width:300px;
float:left;
}

**NoSmoking** · 12/01/2015, 19h28

Envoyé par miss_socrates

C'est normal que les 2 div se superposent car il faut effectivement les placer en float:left mais la propriété display:block du body le contredit en les plaçant en bloc.

Tu es sûr de ton coup sur ce point ?

**mondoudou** · 12/01/2015, 22h08

Bonjour,
Il faudrait augmenter le width du body le temps de trouver la solution, c'est un peu serré, et regarder avec un firebug le code généré avec htmltopdf et sans htmltopdf pour voir les différences au niveau padding, margin, width.

**NoSmoking** · 13/01/2015, 18h58

(...)et regarder avec un firebug le code généré avec htmltopdf et sans htmltopdf(...)

j'ai du mal à comprendre les codes que tu cherches à comparer !

**mondoudou** · 13/01/2015, 22h34

Moi aussi car je ne sais pas ce qu'est htmltopdf, j'ai cru à un plugin, je dois faire fausse route désolé

.

**miss_socrates** · 13/01/2015, 23h56

Htmltopdf est un petit logiciel qui transforme une page html au format pdf. Quant à pdftohtml, il ... fait juste l'inverse.
C'est dingue non???

**mondoudou** · 14/01/2015, 01h15

Hello,
Je pensais que c'etait une sorte de wrapper mais ok ils sont mal alignés dans le pdf donc, autant pour moi

Pourquoi le display block du body contredit les float:left ?

**miss_socrates** · 14/01/2015, 07h24

Parce que les div placés en float:left vont se positionner inline c'est-à-dire côte à côte tandis que le display:block les place l'un en dessous de l'autre

**mondoudou** · 14/01/2015, 08h47

Il me semble n'avoir jamais vu ce comportement des display:block qui ne peuvent pas flotter. Il me semblait aussi qu' un div sans propriété display est déja en display:block je crois mais merci de l'info j'irais potasser sur google

**miss_socrates** · 14/01/2015, 19h31

Oui, la valeur par défaut de display est block.
Voici une petite explication :

Block et Inline

Display : block et Display : inline sont les utilisations les plus fréquentes de la propriété Display.

block
Induit un élément à générer une boîte de bloc principale

inline
Induit un élément à générer une ou plusieurs boîtes en-ligne

Il existe principalement deux grands types de balises : les éléments en Bloc et les éléments en Ligne.

les balises de type BLOC ("block") comme les balises <p>, <ul>, <li>, <div>, <form>, <input>, <blockquote>, <h1>...<h6>,... (voir la liste des éléments de type Bloc)
les balises de type EN LIGNE ("inline") comme <a>, <strong>, <em>, <span>, <img>,... (voir la liste des éléments de type En-ligne)

De ces deux groupes découlent des spécificités d'affichage :

les blocs se placent toujours l'un en-dessous de l'autre (saut de ligne, affichage à la verticale). Par exemple: une suite de paragraphes ou une liste
les inline se placent toujours l'un à côté de l'autre (ils restent dans le texte courant). Par exemple: la mise en gras d'une partie de texte à l'aide de la balise <strong>

**NoSmoking** · 14/01/2015, 20h32

Envoyé par miss_socrates

C'est normal que les 2 div se superposent car il faut effectivement les placer en float:left mais la propriété display:block du body le contredit en les plaçant en bloc. Il ne faut plus répéter pour chaque ID la propriété display: inline(-block) puisque celle-ci est héritée du body.

Envoyé par mondoudou

Pourquoi le display block du body contredit les float:left ?

Le display du BODY n’influence nullement les DIV en float:left, il existe des règles bien appliquées par les différents navigateurs.

Ces relations sont données dans la recommandation § 9.7 Relationships between 'display', 'position', and 'float'.

Concernant les valeurs par défaut ^(*)

et bien sûr l'incontournable Glossaire des propriétés CSS sur DVP.

^(*) pas trouvé pour HTML5 et ces nouvelles balises...

**mondoudou** · 14/01/2015, 21h25

Merci à vous deux pour toute ces explications et recommandations

Aligner 2 div en utilisant HTML to PDF

Positionnement en CSS

Discussions similaires

Partager

Partager