Mise en page CSS - problème largeur div
nhefti
Messages postés
48
Statut
Membre
-
ideal -
ideal -
Bonjour,
Afin de me séparer de ma mise en page faite avec un tableau je cherche à recréer un style 3 colonnes centré avec un header et un footer en CSS.
Pour le tableau il me semble que j'ai réussi. Par contre je ne comprends pas pourquoi la largeur de mon header et footer s'aligne sur la largeur de mon tableau principal (alors qu'ils sont en width 100%).
Je bosse avec Dreamweaver (version 8 à l'époque de Macromédia ...). Merci d'avance pour vos réponses.
Nico
Je vous laisse le code pour que ce soit un peu plus clair pour tout le monde :
<body>
<div id="header">tete</div>
<div id="principal" style="clear:both">
<div id="left">
<p>gauche</p>
<p> </p>
<p> </p>
<p> </p>
<p>bas gauche </p>
</div>
<div id="middle">
<p>milieu</p>
<p> </p>
<p> </p>
</div>
<div id="right">
<p>drout</p>
<p> </p>
<p> </p>
<p> </p>
<p>bas droit </p>
</div>
</div>
<div style="clear:both"> espace </div>
<div id="footer" >le pied</div>
</body>
et le CSS :
@charset "utf-8";
/* CSS Document */
body {
margin: 0;
padding: 0;
background-color: #000000;
}
div#principal {
width:700px;
margin-right: auto;
margin-left: auto;
background-color: #009999;
clear: both;
}
div#header {
height: 50px;
background-repeat: no-repeat;
width: 100%;
background-position: center;
visibility: visible;
background-color: #99FF00;
}
div#corps {
width: 1200px;
background-color: #00FF00;
top: 101px;
left: 2px;
margin-right: auto;
margin-left: auto;
}
div#left {
float: left;
width: 150px;
background-color: red;
height: auto;
}
div#right {
float: right;
width: 150px;
background-color: green;
}
div#middle {
margin: 0px;
background-color: #999999;
width: 400px;
padding: 0px;
height: auto;
float: left;
}
div#footer {
background-color: yellow;
height: 50px;
float: left;
margin-right: 0px;
margin-left: 0px;
width: 100%;
clear: both;
}
Afin de me séparer de ma mise en page faite avec un tableau je cherche à recréer un style 3 colonnes centré avec un header et un footer en CSS.
Pour le tableau il me semble que j'ai réussi. Par contre je ne comprends pas pourquoi la largeur de mon header et footer s'aligne sur la largeur de mon tableau principal (alors qu'ils sont en width 100%).
Je bosse avec Dreamweaver (version 8 à l'époque de Macromédia ...). Merci d'avance pour vos réponses.
Nico
Je vous laisse le code pour que ce soit un peu plus clair pour tout le monde :
<body>
<div id="header">tete</div>
<div id="principal" style="clear:both">
<div id="left">
<p>gauche</p>
<p> </p>
<p> </p>
<p> </p>
<p>bas gauche </p>
</div>
<div id="middle">
<p>milieu</p>
<p> </p>
<p> </p>
</div>
<div id="right">
<p>drout</p>
<p> </p>
<p> </p>
<p> </p>
<p>bas droit </p>
</div>
</div>
<div style="clear:both"> espace </div>
<div id="footer" >le pied</div>
</body>
et le CSS :
@charset "utf-8";
/* CSS Document */
body {
margin: 0;
padding: 0;
background-color: #000000;
}
div#principal {
width:700px;
margin-right: auto;
margin-left: auto;
background-color: #009999;
clear: both;
}
div#header {
height: 50px;
background-repeat: no-repeat;
width: 100%;
background-position: center;
visibility: visible;
background-color: #99FF00;
}
div#corps {
width: 1200px;
background-color: #00FF00;
top: 101px;
left: 2px;
margin-right: auto;
margin-left: auto;
}
div#left {
float: left;
width: 150px;
background-color: red;
height: auto;
}
div#right {
float: right;
width: 150px;
background-color: green;
}
div#middle {
margin: 0px;
background-color: #999999;
width: 400px;
padding: 0px;
height: auto;
float: left;
}
div#footer {
background-color: yellow;
height: 50px;
float: left;
margin-right: 0px;
margin-left: 0px;
width: 100%;
clear: both;
}
A voir également:
- Mise en page CSS - problème largeur div
- Mise en forme conditionnelle excel - Guide
- Supprimer page word - Guide
- Mise a jour chrome - Accueil - Applications & Logiciels
- Mise a jour windows 10 - Accueil - Mise à jour
- Mettre google en page d'accueil - Guide
1 réponse
bonjour
rectif
<body>
<div id="principal" style="clear:both">
<div id="header">tete</div>
<div id="left">
<p>gauche</p>
<p> </p>
<p> </p>
<p> </p>
<p>bas gauche </p>
</div>
<div id="middle">
<p>milieu</p>
<p> </p>
<p> </p>
</div>
<div id="right">
<p>drout</p>
<p> </p>
<p> </p>
<p> </p>
<p>bas droit </p>
</div>
<div id="footer" >le pied</div> </div>
</body>
rectif
<body>
<div id="principal" style="clear:both">
<div id="header">tete</div>
<div id="left">
<p>gauche</p>
<p> </p>
<p> </p>
<p> </p>
<p>bas gauche </p>
</div>
<div id="middle">
<p>milieu</p>
<p> </p>
<p> </p>
</div>
<div id="right">
<p>drout</p>
<p> </p>
<p> </p>
<p> </p>
<p>bas droit </p>
</div>
<div id="footer" >le pied</div> </div>
</body>