Bonjour à tous,
J'ai fait toutes les recherches possibles, j'ai coloré mes boites, mis des border tout comme dit la FAQ, mais je ne trouve pas de solution à mon problème!!
J'ai une page avec un footer, un header et un content.
Dans ce content j'ai 3 colonnes. Parfois c'est celle du milieu la plus grande parfois celle de droite.
Donc je ne peux pas en placer une des deux en absolute sinon elle sort du flux et le footer ne se place plus tout en bas.
Je n'arrive pas non plus à bien les placer les deux en relative car sinon celle de droite prend pour référence celle du milieu et donc se décale en fonction du contenu.
Voici le code:
Et le CSS
Quelqu'un pourrait m'aider? Je suis vraiment désespéré là!
Merci beaucoup
J'ai fait toutes les recherches possibles, j'ai coloré mes boites, mis des border tout comme dit la FAQ, mais je ne trouve pas de solution à mon problème!!
J'ai une page avec un footer, un header et un content.
Dans ce content j'ai 3 colonnes. Parfois c'est celle du milieu la plus grande parfois celle de droite.
Donc je ne peux pas en placer une des deux en absolute sinon elle sort du flux et le footer ne se place plus tout en bas.
Je n'arrive pas non plus à bien les placer les deux en relative car sinon celle de droite prend pour référence celle du milieu et donc se décale en fonction du contenu.
Voici le code:
<div id="header">header</div>
<div id="content" style="background-color:red;">
<div class="wrapper">
<!-- 1. Menu Gauche -->
<div id="content_menu" style="background: green;">
<ul>
<li>Menu1</li>
<li>Menu2</li>
<li>Menu1</li>
</ul>
</div>
<!-- 2. Contenu -->
<div id="content_main" style="background: green;">
Contenu qui peut être long ou court.
</div>
<!-- 3. Contenu supplémentaire -->
<div id="content_sub">
Contenu qui peut être plus long ou plus court.
</div>
</div>
</div>
<div id="site_info">Footer</div>Et le CSS
div#header {
position : relative;
height : 111px;
}
div#content{
position: relative;
width: 100%;
min-height: 100%;
}
.wrapper{
position: relative;
width: 975px;
margin: 0 auto;
text-align: left;
}
div#content_menu{
position : absolute;
left: 0;
top : 0;
width: 181px;
min-height : 100%;
background : #fff url(images/template/background_menu.gif) repeat-x top left;
padding: 0 10px;
}
div#content_main{
position : relative;
top : 0;
left: 210px;
width: 400px;
min-height : 100%;
margin-bottom : 20px;
padding : 25px 20px 5px 12px;
background : #fff url(images/template/background_menu.gif) repeat-x top left;
}
div#content_sub{
position : relative;
left: 645px;
top: -90px;
width: 334px;
background : #FFF url(images/template/background_contentSub.gif) no-repeat top left;
}
div#site_info {
position : relative;
display : block;
bottom: 0;
left: 0;
width : 100%;
height : 210px;
}
Quelqu'un pourrait m'aider? Je suis vraiment désespéré là!
Merci beaucoup
