Float et Clear: both;

Version imprimable

Hello tout le monde,

Aujourd'hui je travaille activement sur la création d'un thème wordpress et je recontre un gros problème, c'est d'ailleurs pour cela que j'aurais besoin de votre précieuse aide :)

Voilà un peu comment ça se présente au niveau du code (je l'ai simplifié à mort pour que cela soit plus simple) :

Code HTML :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<body>
    <div id="header">
    </div>
    <div id="conteneur">
        <div id="sidebar">
        </div>
        <div id="content">
        </div>
        <div id="footer">
        </div>
    </div>
</body>

Code CSS :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
#header {
	background: url(images/fond-header.jpg) repeat-x;
	height: 160px;
}
 
#conteneur {
	position: relative;
}
 
#content {
	margin-right: 460px;
	margin-left: 3%;
	padding: 0 10px 0 10px;
}
 
#sidebar {
	position: absolute;
	right: 3%;
	width: 405px;
	background: url(images/haut_sidebar.png) top no-repeat;
	font-family: Arial, Helvetica, sans-serif;
}
 
#footer {
	clear: both;
	padding: 80px 0 0 0;
	height: 54px;
	background: url(images/fond-footer.jpg) repeat-x;
	text-align: center;
}

Merci de votre aide :oops:

05/12/2008, 14h22
Bisûnûrs

Et quel est le problème ?
05/12/2008, 14h34
ThinKiT

Le problème c'est que mon footer varie en haute selon la div contenu mais pas en fonction du contenu ET de la sidebar : si la sidebar est plus le longue que le contenu PLOUF le footer ne se colle pas en dessous mais reste collé au contenu.

Je ne sais pas si j'ai été clair

Pour résumer j'aimerais que mon footer se cale en dessous de ma sidebar si celle-ci est plus grande et en dessous de mon contenu si celui-ci est plus grand
05/12/2008, 14h40
Bisûnûrs

Dans ta sidebar, remplace ton position:absolute et ton right:3% par un float:right;
05/12/2008, 15h07
ThinKiT

Nan mais j'ai vraiment un gros soucis ... Ca marche :D Merci et par contre j'ai l'impression que mon z-index ne fonctionne plus sur le float :s Aie
05/12/2008, 18h49
Erwan31

Citation:

Envoyé par ThinKiT

par contre j'ai l'impression que mon z-index ne fonctionne plus sur le float :s Aie

la propriété z-index ne prend effet que sur les éléments positionnés (absolutre/fixed/relative) ;)