Bonjour,

J'ai un souci avec le float col1 qui déborde sur mon footer. Jusque à la tout aller bien mon footer se comportait bien sauf que j'avais pas encore eu le cas de ce float. Pouvez-vous m'aider à résoudre ce bug svp merci ?

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
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
<html lang="fr">
<head>
<style>
html, body {
  height:100%;
  margin:0px;
  padding:0;
 }
 
#mainarea {
  height:100%;
  background-color:red;
  overflow:hidden;
}
 
#variantes {
  text-align:center;
  margin:0px auto;
  height:100%;
  width:750px;
    background:green;
}
 
#col1 {
float:left;
width:33%;
background:purple;
}
 
#col2 {
float:left;
width:33%;
background:orange;
}
 
#col3 {
float:left;
width:33%;
background:grey;
}
 
#footer{
  margin-top : -50px;
  height : 50px;
  background-color:blue;
  overflow:hidden;
}
 
</style>
</head>
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<body>
<div id="mainarea">
<h1>Mon float dépasse déborde sur le footer :(</h1>
<div id="variantes">
<div id="col1">Inter quos Paulus eminebat notarius ortus in Hispania, glabro quidam sub vultu latens, odorandi vias periculorum occultas perquam sagax. is in Brittanniam missus ut militares quosdam perduceret ausos conspirasse Magnentio, cum reniti non possent, iussa licentius supergressus fluminis modo fortunis conplurium sese repentinus infudit et ferebatur per strages multiplices ac ruinas, vinculis membra ingenuorum adfligens et quosdam obterens manicis, crimina scilicet multa consarcinando a veritate longe discreta. unde admissum est facinus impium, quod Constanti tempus nota inusserat sempiterna.
 
Horum adventum praedocti speculationibus fidis rectores militum tessera data sollemni armatos omnes celeri eduxere procursu et agiliter praeterito Calycadni fluminis ponte, cuius undarum magnitudo murorum adluit turres, in speciem locavere pugnandi. neque tamen exiluit quisquam nec permissus est congredi. formidabatur enim flagrans vesania manus et superior numero et ruitura sine respectu salutis in ferrum.
 
Nihil est enim virtute amabilius, nihil quod magis adliciat ad diligendum, quippe cum propter virtutem et probitatem etiam eos, quos numquam vidimus, quodam modo diligamus. Quis est qui C. Fabrici, M. Curi non cum caritate aliqua benevola memoriam usurpet, quos numquam viderit? quis autem est, qui Tarquinium Superbum, qui Sp. Cassium, Sp. Maelium non oderit? Cum duobus ducibus de imperio in Italia est decertatum, Pyrrho et Hannibale; ab altero propter probitatem eius non nimis alienos animos habemus, alterum propter crudelitatem semper haec civitas oderit.</div>
<div id="col2">col2</div>
<div id="col3">col3</div>
</div>
</div>
<div id="footer">foo</div>
</body>
</html>

Si j'ajoute un margin-bottom:50px; sur la div mainarea ça corrige le souci sur les pages avec beaucoup de contenu mais le footer du coup ne colle plus et se trouve décalé de 50 px vers le bas sur les pages avec peu de contenu bref c'est le serpent qui se mord la queue...

J'aimerai tant que ça marche ! aidez-moi

M_M