[CSS 2.1] Bordure variable sur une div [Résolu]

Torgar · 16/12/2011, 13h00

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, 13h58

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, 14h02

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

Torgar · 16/12/2011, 14h22

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, 15h18

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, 15h56

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à.

16/12/2011, 14h02	#3
Torgar Membre expérimenté Jérémy Développeur Web Inscription : août 2007 Messages : 326 Détails du profil Informations personnelles : Nom : Jérémy Âge : 26 Localisation : France, Gard (Languedoc Roussillon) Informations professionnelles : Activité : Développeur Web Secteur : Industrie Informations forums : Inscription : août 2007 Messages : 326 Points : 535 Points : 535	Ok merci, je vous tiendrais informé de l'évolution de mon cas. __________________ Vivez vos rêves !!! Si vous voulez que l'on vous aide, postez votre code avec la balise [ CODE ] [ /CODE ] (bouton # de l'éditeur)
	00

16/12/2011, 14h22	#4
Torgar Membre expérimenté Jérémy Développeur Web Inscription : août 2007 Messages : 326 Détails du profil Informations personnelles : Nom : Jérémy Âge : 26 Localisation : France, Gard (Languedoc Roussillon) Informations professionnelles : Activité : Développeur Web Secteur : Industrie Informations forums : Inscription : août 2007 Messages : 326 Points : 535 Points : 535	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 __________________ Vivez vos rêves !!! Si vous voulez que l'on vous aide, postez votre code avec la balise [ CODE ] [ /CODE ] (bouton # de l'éditeur)
	00

16/12/2011, 15h18	#5
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 808 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 808 Points : 35 787 Points : 35 787	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). __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

16/12/2011, 13h58	#2
Bisûnûrs Modérateur Josselin Développeur Web Inscription : janvier 2004 Messages : 9 050 Détails du profil Informations personnelles : Nom : Josselin Âge : 29 Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : janvier 2004 Messages : 9 050 Points : 12 181 Points : 12 181	Tu peux t'inspirer des colonnes factices en CSS (je te laisse le soin de faire une recherche sur ces termes).
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email