Bonjour à tous,
Voilà je suis incapable de faire un truc propre .. j'ai tout essayé ... mais voilà
Je souhaite donc comme sur le dessin avoir en haut mon Header, ensuite mon contenu (composé d'une partie gauche fixée à 700px et d'une partie droite fixée a 200px en gros) et enfin du footer qui resterait systématiquement en bas.
Seulement voilà dès que j'associe un bord droit à ma classe #Main.Left celui ci s'arrête quand il n'y a plus de contenu ... j'aimerais bien voir mon "border right et left" prendre toute la hauteur de l'espace entre le footer et le header ..
J'ai tout essayé ...
Header : position relative
Footer : Position relative, bottom 0 (meme fixed ...)
Actuellement j'ai :
Code :
- #header {
- height:100px;
- width:100%;
- margin-top:0;
- position:relative;
- }
- #main
- {
- margin:0 auto;
- width:900px;
- height:100%;
- min-height: 100%;
- clear:both;
- display:block;
- position: relative;
- }
- #main .left
- {
- width: 698px;
- float:left;
- border-right:1px solid #ccc;
- border-left:1px solid #ccc;
- /* code shadow */
- position:relative;
- height:100%;
- min-height: 100%;
- height:auto;
- }
- #main .right
- {
- float:right;
- min-height:100%;
- height:100%;
- position:relative;
- width:200px;
- }
- #footer
- {
- width:100%;
- border-top:1px solid #777;
- background-color: #ccc;
- position:absolute;
- bottom:0;
- height:80px;
- display:block;
- }
|
J'ai même essayé avec un div #container regroupant le header,content et footer mais rien n'y fait ... body à 100% ... container aussi ... ca doit etre tout simple mais je sèche
Merci pour votre aide
Cordialement