Avoir 3 sections l'une à coté de l'autre

**Golzinne** · 21/03/2013, 01h51

Bonjour,

Je voudrais structurer ma page en trois sections principales verticalement.

Pour visualiser mes trois sections principales, je leur ai donné des couleurs et j'ai mis un Border.

Le but recherché est d'avoir une section bleue à gauche, une section jaune au milieu et une section grise à droite.

Tout va très bien en utilisant

Code :

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

 display:inline-block;

pour mes trois sections et j'obtiens le résultat escompté.

Je voudrais maintenant rajouter dans ma section de gauche (la bleue), deux autres sections l'une en dessous de l'autre. Une section verte et une section fushia.

Et là, ma section principale de droite, la grise, passe en dessous de tout.

Si un courrageux, qui a suivi le raisonnement peut me donner une piste ?

**Muchos** · 21/03/2013, 02h13

Il nous faut votre code html/css, pour qu'on puisse voir le bogue et le corriger.

Envoyé par Golzinne

Je voudrais structurer ma page en trois sections principales verticalement.

Horizontalement, non ?

**rodolphebrd** · 21/03/2013, 09h49

Bonjour,

je ne vois pas où est le problème.

Voici un résultat avec table-cell que l'on peut obtenir avec un float left

Code html :

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
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>3 colonnes fluides</title>
<style>
article {
        display:table;
        width:100%;
}
section{
        display:table-cell;
    background-color:#99C;
        width:30%;
}
section:nth-of-type(even){
        background-color:red;
}
.exemple{
        width:150px;
        height:100px;
        background-color:lime;
        margin-top:20px;
}
</style>
</head>
<body>
<article>
<section><div class="exemple"></div>
<div class="exemple"></div></section>
<section></section>
<section>
</section>
</article>
</body>
</html>

**Torgar** · 21/03/2013, 10h44

Salut,

Et si tu nous montrais ton code ?

Quelle compatibilité de navigateur veux-tu assurer ?

**Golzinne** · 21/03/2013, 16h14

Bonjour,

Merci à tous pour vos réactions rapides, on voit que c'est un forum dynamique !

Pour l'instant je suis sur IE9 (via VS2010)

Voici d'abord un exemple de ce que je veux faire et qui fonctionne !

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
.bkeBorderBlue
{
    border-style: solid;
    border-width: 3px;
    border-color: Blue;
    padding: 5px;
    display:inline-block;
}
 
.bkeBorderYellow
{
    border-style:solid;
    border-width: 3px;
    border-color: Yellow;
    display:inline-block;
    vertical-align:top;
    padding-left:10px;
}
 
.bkeBorderFuchsia
{
    border-style: solid;
    border-width: 3px;
    border-color: Fuchsia;
 
   vertical-align:top;
}
 
.bkeBorderRed
{
    border-style: solid;
    border-width: 3px;
    border-color: Red;
 
 
}
 
.bkeBorderGreen
{
    border-style: solid;
    border-width: 3px;
    border-color: Green;
 
}
 
 
 
.bkeBorderGray
{
    border-style: solid;
    border-width: 3px;
    border-color: Gray;
     display:inline-block;
      vertical-align:top;
 
 
}
 
.bkeTextbox
{
    margin-left:20px;
    width:120px;
}

avec

Code html :

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
 <section class="bkeBorderBlue">
            <h1>Bleu</h1>
            <p>Ma section Bleue <br />devrait contenir une <br />section Verte et en <br />dessous une section Fuschia</p>
                  <section class="bkeBorderGreen">        
                     <p>ma section verte</p>
                  </section>
            <section class="bkeBorderFuchsia">
                   <p>ma section Fushia</p>
            </section>
 
            </section>
            <%--fin de blue--%>
            <section class="bkeBorderYellow">
            <h6>Ma section Jaune</h6>
</section>
            <section class="bkeBorderGray">
            <h6>ma section Grise</h6>
 
            </section>

Voici maintenant un code (avec le même CCS) qui fait passé mon dernier cadre gris en dessous !!! ???

Code html :

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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
 
     <section class="bkeBorderBlue">
 
 
                  <section class="bkeBorderGreen">        
                        <table width='230px' >
 
                <tr>
                    <td>
                        <asp:Label runat="server" Text='aaaaaa:' />
                    </td>
                    <td>
                        <asp:Label  runat="server" Text='aaaaaaaaaaaaa' />
                    </td>
                </tr>
 
 
                <tr>
                    <td>
                    <asp:Label  ID="Label1" runat="server" Text='bbbbbb:' />
                    </td>
                    <td>
                        <asp:Label  ID="bbbbbb" runat="server" Text='bbbbbbbb' />
                    </td>
                </tr>
 
 
                <tr>
                    <td>
                       <asp:Label  ID="Label2" runat="server" Text='ccc:' />
                    </td>
                    <td>
                        <asp:Label  ID="ccc" runat="server" Text='ccccc' />
                    </td>
                </tr>
 
 
                <tr>
                    <td>
                        <asp:Label  ID="Label3" runat="server" Text='ddddddddddd:' />
                    </td>
                    <td>
                        <asp:Label  runat="server" Text='ddddddddddd' />
                    </td>
                </tr>
 
 
                <tr>
                    <td>
                        <asp:Label  ID="Label4" runat="server" Text='eeeeee:' />
                    </td>
                    <td>
                        <asp:Label  runat="server" Text='eeeeeeeeeeee' />
                    </td>
                </tr>
 
 
                <tr>
                    <td>
                        <asp:Label  ID="Label5" runat="server" Text='ffffffffffff:' />
                    </td>
                    <td>
                        <asp:Label runat="server" Text='ffffffffffff' />
                    </td>
                </tr>
 
 
                 <tr>
                    <td>
                        <asp:Label ID="Label6" runat="server" Text='ggggggggggg:' />
                    </td>
                    <td>
                        <asp:Label ID="Label7" runat="server" Text='ggggggggggggg' />
                    </td>
                </tr>
 
 
                 <tr>
                    <td>
                        <asp:Label  ID="Label8" runat="server" Text='hhhhhhhhh:' />
                    </td>
                    <td>
                        <asp:Label ID="Label9" runat="server" Text='hhhhhhhhhhhhhh' />
                    </td>
                </tr>
 
 
            </table>
                  </section>
 
 
 
 
            <section class="bkeBorderFuchsia">
                     <asp:LinkButton ID="EditButton" runat="server" CausesValidation="False" CommandName="Edit"
                        Text="Edit" />
                    &nbsp;
                    <asp:LinkButton ID="DeleteButton" runat="server" CausesValidation="False" CommandName="Delete"
                        Text="Delete" />
                    &nbsp;
                    <asp:LinkButton ID="NewButton" runat="server" CausesValidation="False" CommandName="New"
                        Text="New" />
            </section>
 
            </section>
            <%--fin de blue--%>
            <section class="bkeBorderYellow">
            <h6>Section Jaune</h6>
            <table >
 
            <tr>
                <td>
                    <input type="checkbox" checked="checked" name="aaaaaaaa" id="aaaaaaaa" /><label for="aaaaaaaa">aaaaaaaa</label>
                </td>
                <td>
                     <asp:TextBox CssClass="bkeTextbox" Text="bbbbbbbbbb" runat="server" ID="bbbbbbbbbb" ></asp:TextBox><br />
                </td>
            </tr>
 
            <tr>
                <td>
                    <input type="checkbox" checked="checked" name="cccccccccc" id="Checkbox1" /><label for="cccccccccc">cccccccccc</label>
                </td>
                <td>
                     <asp:TextBox CssClass="bkeTextbox" Text="ddddddddddddd" runat="server" ID="TextBox1" ></asp:TextBox><br />
                </td>
            </tr>
 
            <tr>
                <td>
                    <input type="checkbox" name="eeeeeeeeeee" id="Checkbox2" /><label for="eeeeeeeeeee">eeeeeeeeeee</label>
                </td>
                <td>
                     <asp:TextBox CssClass="bkeTextbox" Text="" runat="server" ID="TextBox2" ></asp:TextBox><br />
                </td>
            </tr>
 
            <tr>
                <td>
                    <input type="checkbox" name="ffffffff" id="Checkbox3" /><label for="ffffffff">ffffffff</label>
                </td>
                <td>
                     <asp:TextBox CssClass="bkeTextbox" Text="" runat="server" ID="TextBox3" ></asp:TextBox><br />
                </td>
            </tr>
 
            <tr>
                <td>
                    <input type="checkbox" name="hhhhhhhhhhhhhh" id="Checkbox4" /><label for="hhhhhhhhhhhhhh">hhhhhhhhhhhhhh</label>
                </td>
                <td>
                     <asp:TextBox CssClass="bkeTextbox" Text="" runat="server" ID="TextBox4" ></asp:TextBox><br />
                </td>
            </tr>
 
              <tr>
                <td>
                    <input type="checkbox" checked="checked" name="Autre" id="Checkbox5" /><label for="Autre">Autre</label>
                </td>
                <td>
                     <asp:TextBox CssClass="bkeTextbox" Text="" runat="server" ID="TextBox5" ></asp:TextBox><br />
                </td>
            </tr>
 
 </table>
            <%--</section>--%>
</section>
            <section class="bkeBorderGray">
            <h6>Section grise</h6>
          <table >
 
            <tr>
                <td>
                    <input type="checkbox" checked="checked" name="aaaaaaaa" id="Checkbox6" /><label for="aaaaaaaa">aaaaaaaa</label>
                </td>
                <td>
                     <asp:TextBox CssClass="bkeTextbox" Text="bbbbbbbbbb" runat="server" ID="TextBox6" ></asp:TextBox><br />
                </td>
            </tr>
 
            <tr>
                <td>
                    <input type="checkbox" checked="checked" name="cccccccccc" id="Checkbox7" /><label for="cccccccccc">cccccccccc</label>
                </td>
                <td>
                     <asp:TextBox CssClass="bkeTextbox" Text="ddddddddddddd" runat="server" ID="TextBox7" ></asp:TextBox><br />
                </td>
            </tr>
 
            <tr>
                <td>
                    <input type="checkbox" name="eeeeeeeeeee" id="Checkbox8" /><label for="eeeeeeeeeee">eeeeeeeeeee</label>
                </td>
                <td>
                     <asp:TextBox CssClass="bkeTextbox" Text="" runat="server" ID="TextBox8" ></asp:TextBox><br />
                </td>
            </tr>
 
            <tr>
                <td>
                    <input type="checkbox" name="ffffffff" id="Checkbox9" /><label for="ffffffff">ffffffff</label>
                </td>
                <td>
                     <asp:TextBox CssClass="bkeTextbox" Text="" runat="server" ID="TextBox9" ></asp:TextBox><br />
                </td>
            </tr>
 
            <tr>
                <td>
                    <input type="checkbox" name="hhhhhhhhhhhhhh" id="Checkbox10" /><label for="hhhhhhhhhhhhhh">hhhhhhhhhhhhhh</label>
                </td>
                <td>
                     <asp:TextBox CssClass="bkeTextbox" Text="" runat="server" ID="TextBox10" ></asp:TextBox><br />
                </td>
            </tr>
 
              <tr>
                <td>
                    <input type="checkbox" checked="checked" name="Autre" id="Checkbox11" /><label for="Autre">Autre</label>
                </td>
                <td>
                     <asp:TextBox CssClass="bkeTextbox" Text="" runat="server" ID="TextBox11" ></asp:TextBox><br />
                </td>
            </tr>
 
 </table>
            </section>

Merci pour votre aide.

**NoSmoking** · 21/03/2013, 19h26

Bonjour,

Pour visualiser mes trois sections principales, je leur ai donné des couleurs et j'ai mis un Border.

cela n'est pas conseillé car cela influe directement sur la largeur/hauteur de l'élément, en attendant box-sizing pris en compte par tous je te conseilles de jouer sur la couleur du background.

**Golzinne** · 21/03/2013, 20h00

Bonjour,

Evidemment mon but n'était pas de laisser les borders, c'était juste pour voir la position des sections... mais ça NoSmoking l'avait compris.

Donc j'ai remplacé borders par background et .... ça fonctionne

Merci à toi, problème résolu ! (même si le comportement des borders m'inquiètent un peu)

Avoir 3 sections l'une à coté de l'autre

CSS

Discussions similaires

Partager

Partager