Bonjour à tous,
Dans le cadre d'un petit projet, je me heurte à un problème de Css/Html qui est le suivant:
J'ai créé un div qui contient 3 autres div que je dois positionner horizontalement à l'intérieur du premier, qui doivent occupé 100% de la hauteur du parent et un pourcentage de la largeur. La somme de la largeur des 3 représente 100% de la largeur du parent. J'ai ensuite ajouté à ces div une bordure et un padding. Le problème est que 100% + padding + border me fais sortir le dernier div de son parent. Voici mon code ca sera plus clair:
Les attributs width et height sont placé directement dans le code html et non en css car je calcul les pourcentages avec du code php que je ne vous présente pas.
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 <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>test (X)HTML et CSS</title> <style type="text/css"> div.parent{ background: red; border:thin solid black; padding:5px; } div.fils{ background: pink; border:thin solid black; padding:5px; float: left; } </style> </head> <body> <div class="parent" style="width:100%; height:100%"> <div class="fils" style="width:50%; height:100%;"></div> <div class="fils" style="width:35%; height:100%;"></div> <div class="fils" style="width:15%; height:100%;"></div> </div> </body> </html>
Pour les problème de débordement du au padding j'avais pensé utiliser :Mais la c'est tout un div qui sort du premier
Code : Sélectionner tout - Visualiser dans une fenêtre à part display: table;
Merci d'avance pour votre aide.
Cordialement.
Partager