Alignement de Div imbriqués

**Skufz** · 27/02/2009, 03h12

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:

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>

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.

Pour les problème de débordement du au padding j'avais pensé utiliser :

Code :

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

display: table;

Mais la c'est tout un div qui sort du premier

Merci d'avance pour votre aide.

Cordialement.

Invité · 27/02/2009, 11h54

Essaie de réduire le pourcentage de la largeur de tes 3 div pour qu'elles ne fassent que 96 ou 97% de la largeur de la div parent.

**pop_up** · 27/02/2009, 12h12

Est-ce que ce que tu veux ne serait pas typiquement une mise en page en tableau ?

En général, je ne prêche pas les mises en page en tableau mais quand on veut des mises en page qui fassent 100% de hauteur et que l'on souhaite que les div se comportent comme des tableaux, ça peut aider :

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
 
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>test (X)HTML et CSS</title>
    <style type="text/css">
html, body {
    height:100%;
    margin:0;
    padding:0;
}
.parent{
	border: 1px solid red;
    width: 100%;
    height: 100%;
 
}
.bordure {
    border: 1px solid black;
}
 
.w50 {
    width:50%;
}
 
.w15 {
    width:15%;
}
 
.w35 {
    width:35%;
}
     </style>
</head>
<body>
<table class="parent">
    <tr>
        <td class="bordure w50"></td>
        <td class="bordure w35"></td>
        <td class="bordure w15"></td>
    </tr>
</table>
</body>
</html>

**Skufz** · 02/03/2009, 16h07

Merci pour votre aide, j'ai opté pour les tableaux et je n'ai plus de problème de bordure.

Alignement de Div imbriqués

Positionnement en CSS

Discussions similaires

Partager

Partager