Discussion :

[JefReb]

Bonjour,
En suivant le tutoriel de Julien Roche j'ai commencé un code pour bien comprendre.
Mais dès le début je bute sur un problème de largeur. J'ai pourtant suivi scrupuleusement les largeurs telles qu'elles sont définis dans le tutoriel.
Code CSS:

Code CSS :

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
html, body {
   width: 100%;
   height: 100%;
   min-height: 100%;
   margin:0; padding:0
   font-size: 1em; /* Ideal: 16px */ 
}
.layout-main {
   width: 80%; /* Ideal: 1024px -> 1024 / 1280 */
   height: 100%;
   min-height: 100%;
   margin: 0 auto;
}
.main {
   height: 30%;
   min-height: 30%;
   background-color:blue;
}
.layout-menu, .layout-content, .layout-adv {
   display: inline-block;
   height: 100%;
   min-height: 100%;
}
.layout-menu {
   color: #FFFFFF;
   background-color: #CC0000;
   width: 20.8984375%; /* Ideal: 214px -> 214 / 1024 */
}
.layout-content {
   color: #000000;
   background-color: #999;
   width: 58.203125%; /* Ideal: 596px -> 596 / 1024 */
}
.layout-adv {
   color: #000000;
   background-color: #FF9;
   width: 20.8984375%; /* Ideal: 214px -> 214 / 1024 */
}

Code HTML:

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="layout-main">
         <div class="main">
            <div class="layout-menu">
            </div><!-- layout-menu -->
 
            <div class="layout-content">
           </div><!-- layout-content -->
 
           <div class="layout-adv">
            </div><!-- layout-adv -->
 
         </div><!-- main -->
      </div><!-- layout-main -->

Et le résultat dans http://codepen.io/JefReb/pen/CGBqt

Code on ne peut plus simple, J'ai juste mis à 30% la hauteur pour que ce soit plus visible.
Il est bien conseillé de mettre tous les chiffres après la virgule et la somme des 3 largeurs layout-menu, layout-content et layout-adv:
20.8984375%+58.203125% +20.8984375% font bien les 100% de la div .main dans laquelle elles sont placées.

Et pourtant ... elles ne tiennent pas et il y a un gap entre layout-menu et layout-content si bien que layout-adv n'a pas sa place et se colle en dessous.
Pourtant se sont les mêmes % que dans les exemples du tutoriel de Julien Roche qui marchent bien dans cette largeur.
Où se trouve mon erreur? Dès que je mets layout-adv à 19.3% par exemple cela passe au-dessus 19.4% ne passe pas.
Je comprends plus où je me suis planté.
Merci d'avance à ceux qui prendront le temps de me répondre.

[NoSmoking]

Bonjour,
tu es victime du virus whitespace dû à l'utilisation de display:inline-block !

Pour résoudre ton problème il faut les supprimer, à cela bien des façons mais au moins 2 efficaces.
en laissant les commentaires mais en les réorganisant

Code html :

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

1
2
3
4
5
6
7
8
9
10
<div class="layout-main">
    <div class="main">
        <div class="layout-menu">
        </div><!-- layout-menu
    --><div class="layout-content">
        </div><!-- layout-content
    --><div class="layout-adv">
        </div><!-- layout-adv -->
    </div><!-- main -->
</div><!-- layout-main -->

en supprimant les commentaires et en déplaçant le balisage par exemple

Code html :

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

1
2
3
4
5
6
7
8
<div class="layout-main">
    <div class="main">
        <div class="layout-menu">
        </div><div class="layout-content">
        </div><div class="layout-adv">
        </div>
    </div><!-- main -->
</div><!-- layout-main -->

la solution qui dans ton cas résoudrait également ton problème serait de passer par des float:left sur tes éléments

Code :

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

1
2
3
4
5
6
.layout-menu, .layout-content, .layout-adv {
/*   display: inline-block;/**/
   float:left;
   height: 100%;
   min-height: 100%;
}

[JefReb]

Merci noSmoking. Alors là je n'y aurai pas pensé, je ne savais même pas ce virus.
Je vais donc revoir mon code.
Encore Merci