<div class="header">
<!-- Insèrer le code du header, possibilité de rajouté une barre de menu horizontale -->
</div>
<div class="menu_left">
<!-- Insertion du menu gauche -->
</div>
<div class="menu_right">
<!-- Insertion du menu droite -->
</div>
<div class="content">
<!-- Insertion du contenu du site -->
</div>
<div class="footer">
<!-- Insertion du code du footer -->
</div>
*
{
margin: 0; /* Initialise les marges extérieures à 0 */
padding: 0; /* Initialise les marges intérieures à 0 */
border: 0; /* Initialise les bordures à 0 */
}
.header {
width: 100%;
height: 50px;
background: red;
}
.menu_left {
width: 20%;
float: left;
height: 150px; /*à enlever une fois que du contenu est ajouté à la colonne*/
background: green;
}
.menu_right {
width: 20%;
float: right;
height: 150px; /*à enlever une fois que du contenu est ajouté à la colonne*/
background: green;
}
.content {
width: 60%;
float: left;
height: 150px; /*à enlever une fois que du contenu est ajouté dans ce bloc*/
background: yellow;
}
.footer {
width: 100%;
clear: both;
height: 50px; /*à enlever une fois que du contenu est ajouté à ce bloc*/
background: blue;
}
MISES EN GARDE :1°) Si tu rajoutes des padding ou margin aux colonne left/right/content tu auras une barre horizontale qui apparaitra.
2°) Si tu veux faire des espaces entre ces blocs, il te faudra rajouter un bloc dans ces derniers, ne pas fixer de largeur, ni de hauteur (donc tout laisser en auto) et à ce moment appliquer des margin (voire des padding, à tester) à ces nouveaux blocs encastrés et normalement tu ne devrais pas avoir d'ascenseur horizontal.
3°) Tu peux essayer de fixer la largeur des colonnes (à 200px donc) et de mettre le content en auto et voir ce que ça fait, j'ai pas essayé ou si je l'ai fait me rappelle plus ce que ça fait.
Est ce que tu as un aperçu en ligne de ton problème ?
C'est le fond du contenu que tu souhaites voir descendre à 1px du footer quand ce bloc de contenu est plus petit que les colonnes ?
