Problème css avec float qui déborde sur le footer :(

Eléphant du PHP | 363 Messages

19 août 2015, 17:04

Coucou,

J'ai un souci avec le float col1 qui déborde sur le 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 ...
<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>
<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>
Aidez-moi svp !!!

Fée
Dis-donc fossoyeur, t'as une dent contre moi ou quoi ?

Eléphant du PHP | 363 Messages

19 août 2015, 17:19

si je mets un margin-bottom:50px; sur la div mainarea ça corrige le souci sur les pages avec beaucoup de contenu mais le footer ne colle plus et se trouve décalé de 50 px vers le bas sur les pages avec peu de contenu.
Dis-donc fossoyeur, t'as une dent contre moi ou quoi ?

Eléphanteau du PHP | 42 Messages

19 août 2015, 17:36

Salut,

Personnellement, je metterais, une hauteur minimale pour mainarea
min-height : 500px
par exemple
cela fera comme si les pages qui n'ont pas beaucoup de contenu ont une taille raisonnable.

Eléphant du PHP | 363 Messages

19 août 2015, 17:39

Merci Vincent je présume ?

Le souci c'est que je ne peux pas faire ça car mon background sera une image donc on verra la démarcation :(
Dis-donc fossoyeur, t'as une dent contre moi ou quoi ?

ViPHP
ViPHP | 928 Messages

19 août 2015, 20:26

La démarcation se verra de toute façon suivant la taille de l'écran. Les design multi-colonne avec un footer collé en bas sont un vrai cauchemar à créer ;)

Eléphant du PHP | 363 Messages

19 août 2015, 21:16

Bonjour genova, et dans mon cas tu n'as pas une piste ?
Apparemment tu as réussi toi ^^
Dis-donc fossoyeur, t'as une dent contre moi ou quoi ?

ViPHP
ViPHP | 928 Messages

20 août 2015, 02:45

J'y avais passé un max de temps, et j'avais réussi oui, mais honnêtement je ne me souviens plus de comment. Il faut jouer avec les height et les min-height, je crois qu'il y avait des positions absolues aussi. Je te conseil de lire les tutoriaux sur les design en 3 colonnes sur Alsacréation, ça m'avait pas mal aidé.

Eléphant du PHP | 363 Messages

20 août 2015, 09:39

Si tu regardes mon exemple j'arrive a pas un résultat très proche de ce que je veux sauf que tu as cette histoire de contenu.

Faut juste couper le flux des float. A chaque fois j'ai un effet de bord quand je corrige un cas :(
Dis-donc fossoyeur, t'as une dent contre moi ou quoi ?

Eléphanteau du PHP | 42 Messages

20 août 2015, 22:52

C'est sûr que si le texte dans col1 est plus grand que la taille de col1, il va sortir du div ou plutôt si je ne me trompe pas le div va s'agrandir en fonction du texte et allant sur ce qu'il y a en dessous. Il faudrait alors faire overflow scroll ou quelque chose comme cela.

Petit nouveau ! | 9 Messages

31 août 2015, 00:10

voila )) :D
<html lang="fr">
<head>
<style>
html, body {
  height:100%;
  margin:0px;
  padding:0;
   
 }

#mainarea {
  
  background-color:red;
  overflow:hidden;
  width:100%;
}

#variantes {
 
  margin:0px auto;
  
  width:750px;
    background:green;
	overflow:hidden;
	
}

#col1 {
float:left;
width:33%;
background:purple;
overflow:hidden;
  
}

#col2 {
float:left;
width:33%;
background:orange;
overflow:hidden;
}

#col3 {
float:left;
width:33%;
background:grey;
overflow:hidden;
}

#footer{
display:block;
 
  height : 50px;
  background-color:blue;
  
 

}

</style>
</head>
<body>
<div id="mainarea">
<h1>Mon float ne dépasse plus   :D </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>

Eléphant du PHP | 363 Messages

31 août 2015, 10:27

Salut soleil,

J'ai eu une lueur d'espoir mais le footer ne colle plus en bas de page :'(

Maudit design !
Dis-donc fossoyeur, t'as une dent contre moi ou quoi ?

Petit nouveau ! | 9 Messages

31 août 2015, 12:30

comme ça function j'ai testé avec chrome et internet explorer
<!doctype html>
<html lang="fr">
<head>
<style>
html, body {
  height:100%;
  margin:0px;
  padding:0;
   
 }

#mainarea {

  
  background-color:red;
  overflow:hidden;
  width:100%;
}

#variantes {
margin-left:auto;
margin-right:auto;
display:block;
text-align:center;

  
  width:750px;
    background:green;
	overflow:hidden;
	
}

#col1 {
float:left;
width:33%;
background:purple;
overflow:hidden;
  
}

#col2 {
float:left;
width:33%;
background:orange;
overflow:hidden;
}

#col3 {
float:left;
width:33%;
background:grey;
overflow:hidden;
}

#footer{
display:block;
 
  height : 50px;
  background-color:blue;
  
 

}

</style>
</head>
<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 eisccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccus 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>

Petit nouveau ! | 9 Messages

31 août 2015, 12:30

tu as quel navigateur?