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.