Bordure variable sur une div

**Torgar** · 16/12/2011, 14h00

Bonjour,

Dans ma page web, je dispose de deux div en alignement à gauche (floating). Une div pour le menu de taille fixe (gris foncé) et une div pour le contenu (noir). Et un petit dessin pour mieux se rendre compte.

Je souhaite mettre une bordure de séparation entre les deux div, mais étant donné que la div du contenu a une dimension variable (beige), je ne vois pas comment placer ma bordure. Parce que si je la place sur la div du menu, elle sera trop petite quand la div du contenu sera plus haute que celle du menu. C'est la même réflexion pour la div du contenu.

Comment faire pour que la bordure prenne la même hauteur que ma div la plus grande ?

Voici un bout de code si besoin :

Code :

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

1
2
3
4
5
<div id="body">
    <div id="menu" style="float: left; width: 25%;"></div> <!-- border-right: 1px est bon dans le cas ou le contenu est moins haut que ce menu mais pas l'inverse -->
    <div id="contenu" style="float: left;"></div> <!-- Même commentaire -->
    <div style="clear: both;"></div>
</div>

Si vraiment il n'y a pas de solution en html/css, je passerai par une tite fonction javascript ou pas une alternance de classe CSS en fonction de la page consultée.

**Bisûnûrs** · 16/12/2011, 14h58

Tu peux t'inspirer des colonnes factices en CSS (je te laisse le soin de faire une recherche sur ces termes).

**Torgar** · 16/12/2011, 15h02

Ok merci, je vous tiendrais informé de l'évolution de mon cas.

**Torgar** · 16/12/2011, 15h22

Problème résolu.

J'ai supprimé les propriétés CSS float: left et ajouté un display: table-cell sur les deux div et le tour est joué.

Merci encore

**Bovino** · 16/12/2011, 16h18

Les display de type table sont à éviter au maximum, utilise plutôt inline-block qui est plus adapté il me semble.

Note aussi que ce ne sera pas compatible IE7- (table-cell non reconnu et inline-block non compatible avec les éléments de type block).

**Torgar** · 16/12/2011, 16h56

Ca ne fonctionne pas chez moi sous Firefox 8.

Exemple : j'ai volontairement mis les deux portions de code CSS pour switcher entre.

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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!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>
    <title>Exemple</title>
    <link rel="shortcut icon" href="" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="author" content="" />
    <meta name="robots" content="all" />
    <meta http-equiv="Expires" content="0" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-cache" />
 
    <style type="text/css">
    #body {
        width: 100%;
        height: 500px;
    }
 
    #menu {
        width: 200px;
        background-color: #ff0000;
        display: inline-block;
        vertical-align: top;
    }
 
    #contenu {
        width: 600px;
        background-color: #00ff00;
        display: inline-block;
        vertical-align: top;
    }
    </style>
    <style type="text/css">
    #body {
        width: 100%;
        height: 500px;
    }
 
    #menu {
        width: 200px;
        background-color: #ff0000;
        display: table-cell;
        vertical-align: top;
    }
 
    #contenu {
        width: 600px;
        background-color: #00ff00;
        display: table-cell;
        vertical-align: top;
    }
    </style>
</head>
<body>
<div id="body">
    <div id="menu">
        lfjlfhdlqnh<br />
        lfjlfhdlqnh<br />
        lfjlfhdlqnh<br />
        lfjlfhdlqnh<br />
        lfjlfhdlqnh<br />
        lfjlfhdlqnh<br />
        lfjlfhdlqnh<br />
        lfjlfhdlqnh<br />
        lfjlfhdlqnh<br />
        lfjlfhdlqnh<br />
        lfjlfhdlqnh<br />
        lfjlfhdlqnh<br />
        lfjlfhdlqnh<br />
        lfjlfhdlqnh<br />
        lfjlfhdlqnh<br />
        lfjlfhdlqnh<br />
        lfjlfhdlqnh<br />
        lfjlfhdlqnh<br />
        lfjlfhdlqnh<br />
        lfjlfhdlqnh<br />
        lfjlfhdlqnh<br />
        lfjlfhdlqnh<br />
        lfjlfhdlqnh<br />
        lfjlfhdlqnh<br />
        lfjlfhdlqnh<br />
        lfjlfhdlqnh<br />
        lfjlfhdlqnh<br />
        lfjlfhdlqnh<br />
        lfjlfhdlqnh<br />
        lfjlfhdlqnh<br />
        lfjlfhdlqnh<br />
    </div>
    <div id="contenu">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
</div>
</body>
</html>

Dans le cas des display: inline-block; le menu n'est pas de la longueur de la plus grande div à savoir celle du contenu.

Alors qu'avec display: table-cell; ca fonctionne est le résultat voulu est là.

Bordure variable sur une div [CSS 2.1]

CSS

Vue hybride

Discussions similaires

Partager

Partager