Sujet Précédent Sujet Suivant

Mise en page CSS - problème largeur div

Fermé
nhefti Messages postés 43 Date d'inscription dimanche 21 septembre 2008 Statut Membre Dernière intervention 13 octobre 2014 - 27 oct. 2008 à 11:23
 ideal - 27 oct. 2008 à 17:09
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;
}
A voir également:

1 réponse

Réponse 1 / 1
ideal
27 oct. 2008 à 17:09
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>
0

Discussions similaires

Dimensions L x l x H : comment lire ces infos ?
Miss-Curieuse -
valou -

8 réponses
[référencement] Ne pas être référencé
kij_82 -
Searaphina -

10 réponses