2 pièce(s) jointe(s)
Problème de FLOATS avec option MIN-HEIGHT:100%;
Bonjour à tous,
Je suis en train de développer un site pour une maison de disque, mais un problème s'est posé. Je me suis basé sur ce site pour créer l'effet désiré: http://www.xs4all.nl/~peterned/examples/csslayout1.html
J'explique en quelques mots: Quand le contenu du site est abondant, la page s'affiche normalement, c'est-à-dire, avec un scroll qui mène jusqu'au footer.
Lorsque la page est pauvre en contenu, le footer se loge au bas de la page (bottom:0) et la hauteur du contenu est adaptée à la fenêtre. (min-height:100%)
Mon problème réside dans le fait que une fois que j'utilise un FLOAT dans mon contenu (j'ai 3 colones de largeur differentes) le footer est visible, au lieu de se retrouver dans le bas de la page.
Que faire? Je cherche une solution pour créer mes colonnes sans FLOAT, mais ça me parait nécessaire.
voici mon 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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
html,body {
margin:0;
padding:0;
height:100%;
font-family: Arial, Helvetica, sans-serif;
font-size:11px;
line-height:130%;
color:#361916;
background:#361916;
}
div#container {
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
width:900px;
background:#FFF;;
height:auto /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}
div#header {
background-color:#FFF;
width:100%;
float:left;
border-bottom:solid 1px;
border-bottom-color:#f06422;
}
div#content {
position:relative;
padding:27px 40px 0px; /* bottom padding for footer */
clear:both;
background-color:#FFF;
}
div#footer {
position:absolute;
clear:left;
width:100%;
bottom:0; /* stick to bottom */
height:29px;
padding-top:20px;
margin-top:20px;
background-color:#FFF;
border-top: solid 1px;
border-top-color:#f06422;
left:0;
right:0;
}
/ |
En espérant que une bonne âme puisse m'aider. Ça fait deux jours que je m'arrache les cheveux sur ce problème.
Je poste également deux captures d'écran qui illustrent le problème.
Merci beaucoup d'avance!!
