Une div float plus gourmande que moi

**mioummioum** · 19/08/2015, 17h38

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

Invité · 19/08/2015, 18h23

Bonjour,

1/ une bonne indentation du code permettrai d'y voir plus clair

Consulter la FAQ CSS te donnera déjà quelques réponses.

2/ dis-nous ou montre-nous (dessin, shéma ?) ce que tu veux obtenir comme résultat final

3/ en HTML5, il existe des balises dédiées spécialisées (<header>, <footer>, <section>, <nav>, <article>,...) bien utiles structurellement et sémantiquement parlant.

Initiation à HTML5

**mioummioum** · 19/08/2015, 18h28

Bonjour et merci.

Excusez-moi pour le code :s

Je "voudrais" que variantes prenne 100% de son espace en hauteur et que les colonnes float à l'intérieur ne dépassent pas et que le footer reste collé en bas.

En fait c'est un design multicolonnes floatantes avec un footer qui reste collé en bas de page quelque soit le contenu.

J'aimerai mettre une image en arrière mais du coup je peux pas tricher avec le fond blanc car on voit les démarcations (dans mon exemple il est impératif que variantes fasse 100% de haut et que le footer suive)

J'arrive presque au résultat mais je bloque sur ce float, j'ai pas l'impression que c'est faisable

Invité · 19/08/2015, 19h12

Plusieurs pistes.

Renseigne-toi (cours CSS, FAQ CSS, google,...) sur :

display:table; display:table-cell;
display:flex;
"sticky footer"
image de fond -> background-size:cover; ou background-size:contain;

**mioummioum** · 19/08/2015, 20h29

Merci jreaux, j'utilise déjà ce footer

Avec beaucoup de contenu en marge l'ensemble de la page est cohérente le float pousse bien le footer etc...

Par contre je n'arrive pas à étendre la zone jaune sans tout casser. Quelqu'un peut m'aider ?

J'ai essayé les display table, en vain

Code :

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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[CSS] FOOTER en bas de page...</title>
<meta name="Author" content="NoSmoking">
<style type="text/css">
html, body {
  height : 100%;
  margin : 0;
  padding :0;
  font-family : Verdana;
  font-size : 1em;
  background-color : #f8f8f8;
}
h1 {
  margin : 0;
  color: #6699CC;
  font-size : 2.0em;
}
h1 img{
  vertical-align : middle;
}
#page {
  min-height : 100%;
}
#entete{
  height : 90px;
  padding:5px;
  background-color : #e1e1e2;
  overflow:hidden;
}
#footer{
  margin-top : -50px;     /* - hauteur pied de page */
  height : 50px;
  background-color : #e1e1e2;
  overflow:hidden;
}
#contenu{
  padding-bottom : 50px;  /* hauteur pied de page */
  overflow : hidden;
background-color:#FF0;
}
 
#variantes{
width:800px;
background:red;
overflow:hidden;
}
 
#col1 {
float:left;
width:250px;
background:purple;
}
 
#col2 {
float:left;
width:250px;
background:orange;
}
 
#col3 {
float:left;
width:250px;
background:grey;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id="page">
  <div id="entete">
    <h1><img src="http://www.developpez.net/template/images/logo.png" alt="www.developpez.net">
    CSS FOOTER en bas de page...</h1>
  </div>
  <div id="contenu">
 
<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  Cum duobus ducibus de imperio in Italia est decertaInter 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  Cum duobus ducibus de imperio in Italia 
 
est decertaInter 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  Cum duobus ducibus de imperio in Italia est decertaInter 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  Cum duobus ducibus de imperio in Italia est 
 
decertaInter 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  Cum duobus ducibus de imperio in Italia est decertaInter 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  Cum duobus ducibus de imperio in Italia est 
 
decertaInter 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  Cum duobus ducibus de imperio in Italia est decertaInter 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  Cum duobus ducibus de imperio in Italia est 
 
decertaInter 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  Cum duobus ducibus de imperio in Italia est decertatum, Pyrrho et Hannibale; ab altero propter 
</div>
<div id="col2">col2</div>
<div id="col3">col3</div>
</div>
 
 
  </div>
</div>
<div id="footer">Footer
</div>
</body>
</html>

Invité · 19/08/2015, 21h42

Ce n'est pas clair...

Envoyé par jreaux62

2/ dis-nous ou montre-nous (dessin, shéma ?) ce que tu veux obtenir comme résultat final

?

**mioummioum** · 20/08/2015, 01h53

ok et merci jreaux62

Je "voudrais" que mes div rouge et jaune prennent 100% de la hauteur quelque soit le contenu et que le footer suive en conséquence (voir PJ)

C'est un design avec n div flottantes prenant toute la hauteur et un footer qui reste à sa place, pas bouger, je suis fatiguée moi

C'est better ? Plus clair ? c'est p'tet pas faisable...

Invité · 20/08/2015, 10h10

Bonjour,
voici une solution CSS3 : http://codepen.io/jreaux62/pen/EjBNaJ

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
<div id="page">
  <header id="entete" class="clearfix">
    <h1><img src="http://www.developpez.net/template/images/logo.png" alt="www.developpez.net">
    CSS FOOTER en bas de page...</h1>
  </header>
  <div id="contenu" class="clearfix">
 
      <section id="col1">
        <p>Inter quos Paulus eminebat notarius ortus in Hispania, glabro quidam sub vultu latens, odorandi.</p>
        <p>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.</p>
        <p>Missus ut militares quosdam perduceret ausos conspirasse Magnentio, cum reniti non possent, iussa licentius.</p>
        <p>(FIN)</p>
      </section>
      <section id="col2">
        <p>Periculorum occultas perquam sagax..</p>
        <p>Is in Brittanniam missus ut militares quosdam perduceret ausos conspirasse.</p>
        <p>(FIN)</p>
      </section>
      <section id="col3"><p>col3.</p>
        <p>(FIN)</p>
      </section>
 
  </div>
<footer id="footer" class="clearfix">
  Footer
</footer>
</div>

J'ai modifié le HTML (nom des balises HTML5, disposition des blocs).
N.B. N'ayant pas compris (car par expliqué !) l’intérêt de la div "variantes", je l'ai supprimée.

Code css :

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
51
52
53
54
55
56
57
58
/* -------------------- */
* { margin:0; padding:0; border:0; box-sizing:border-box; }
header, main, footer, nav, section, article { display:block; }
.clearfix:before, .clearfix:after { display:table; content:''; }
.clearfix:after { clear:both; }
/* -------------------- */
html, body {
  height : 100%;
  min-height : 100%;
  font-family : Verdana;
  font-size : 1em;
  background-color : #f8f8f8;
}
/* -------------------- */
#page {
  width:100%;
  height: 100%;
  min-height: 100%;
}
/* -------------------- */
#entete {
  height:90px; /* hauteur fixe */
  padding:5px;
  background-color:#e1e1e2;
}
#entete h1 {
  margin:0;
  color:#6699CC;
  font-size:2.0em;
}
#entete h1 img{
  vertical-align: middle;
}
/* -------------------- */
#contenu {
  background-color:yellow;
  display:flex; flex-direction:row;
  min-height:calc(100% - 90px - 50px); /* hauteur (totale - header - footer) */
}
#contenu p {
  padding:0 0 10px 0;
}
/* -------------------- */
#col1, #col2, #col3 {
  width:20%;
  min-width:150px;
  padding:15px;
}
#col1 { background:purple; }
#col2 { background:orange; }
#col3 { background:grey; }
/* -------------------- */
#footer {
  height:50px; /* hauteur fixe */
  padding:5px;
  background-color:#e1e1e2;
}
/* -------------------- */

La classe "clearfix" permet de remettre des élément hors-flux (float) dans le flux, et évite de mettre overflow:hidden;

**mioummioum** · 20/08/2015, 10h43

Chalut !

Merci jreaux pour le temps passé.

Concernant la div variantes, elle servait à fabriquer le background des colonnes float.

Ton code correspond à mes attentes, cependant il ne fonctionne pas sous internet explorer et safari

Quelle galère !

M_M

Invité · 20/08/2015, 11h08

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
#contenu {
  background-color:yellow;
  display:flex; flex-direction:row;
  height:calc(100% - 90px - 50px); /* hauteur (totale - header - footer) */
}

et ajouter un fichier CSS pour IE :
ie.css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
#contenu {
  min-height:768px;
}

Quant à Safari... es-tu sur Mac ??
(car Safari sur Windows n'est plus mis à jour depuis longtemps)

Cela dit : quand tu auras mis du VRAI contenu dans tes pages (= avec du contenu suffisant pour prendre toute la hauteur), ça devrait (généralement) "masquer" le problème !

**mioummioum** · 20/08/2015, 16h57

Merci pour ton aide. Quand je rajoute du contenu au dessus des colonnes ça décale tout, grrr maudit design !!!!

en parallèle j'ai trouvé ça qui correspond à mes attentes mais je ne sais pas comment étendre la zone jaune "gold" à 100% de façon à ce qu'elle touche le footer, tu n'aurais pas une idée ?

Edit : ou plus exactement la zone "content" brown ^^

Code :

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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>Document Title</title> 
<style>
* /* For CSS Reset */ 
{ 
padding: 0; 
margin: 0; 
} 
 
html, body 
{ 
width: 100%; 
height: 100%; 
} 
 
div#wrapper 
{ 
width: 100%; 
height: 100%; 
min-height: 100%; /* For Sticky Footer */ 
height: auto !important; /* For Sticky Footer */ 
margin: 0 auto -70px; /* For Sticky Footer */ 
} 
 
div#my_menu 
{ 
width: 100%; 
height: 50px; 
outline: 1px solid black; 
background-color: grey; 
text-align: center; 
position: fixed; 
} 
 
div#my_header 
{ 
width: 100%; 
height: 100px; 
outline: 1px solid black; 
background-color: yellow; 
text-align: center; 
padding-top: 50px; 
} 
 
div#content 
{ 
width: 960px; 
margin: 0 auto; 
outline: 1px solid black; 
background-color: brown; 
text-align: center; 
} 
 
div.content_columns 
{ 
width: 320px; 
outline: 1px solid black; 
background-color: gold; 
text-align: center; 
display: table-cell;
} 
 
div.clear_floats /* For Clearing Floats */ 
{ 
clear: both; 
} 
 
div#my_footer 
{ 
width: 100%; 
height: 70px; 
outline: 1px solid black; 
background-color: pink; 
text-align: center; 
} 
 
div.push /* For Sticky Footer */ 
{ 
height: 70px; 
} 
 
</style>
</head> 
<body id="index"> 
<div id="wrapper"> 
    <div id="my_menu"> 
    FIXED MENU WIDTH 100% 
    </div> 
    <div id="my_header"> 
    HEADER WIDTH 100% 
    </div> 
    <div id="content"> 
        <p>CONTENT 960px</p><!--
        --><div id="col1" class="content_columns"> 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        </div><!--
        --><div id="col2" class="content_columns"> 
        COLUMN 2 WIDTH 320px HEIGHT 100% 
        COLUMN 2 WIDTH 320px HEIGHT 100% 
        COLUMN 2 WIDTH 320px HEIGHT 100% 
        COLUMN 2 WIDTH 320px HEIGHT 100% 
        COLUMN 2 WIDTH 320px HEIGHT 100% 
        COLUMN 2 WIDTH 320px HEIGHT 100% 
        COLUMN 2 WIDTH 320px HEIGHT 100% 
        COLUMN 2 WIDTH 320px HEIGHT 100% 
        COLUMN 2 WIDTH 320px HEIGHT 100% 
        </div><!-- 
        --><div id="col3" class="content_columns"> 
        COLUMN 3 WIDTH 320px HEIGHT 100% 
        COLUMN 3 WIDTH 320px HEIGHT 100% 
        COLUMN 3 WIDTH 320px HEIGHT 100% 
        COLUMN 3 WIDTH 320px HEIGHT 100% 
        COLUMN 3 WIDTH 320px HEIGHT 100% 
        </div>
        <div class="clear_floats"></div> <!-- For Clearing Floats --> 
    </div> 
    <div class="push"></div> <!-- For Sticky Footer --> 
</div> 
    <div id="my_footer"> 
    STICKY FOOTER WIDTH 100% 
    </div> 
</body> 
</html>

En tout cas un grand merci !!!

Invité · 20/08/2015, 19h48

Ce n'est pas ma faute si tu dis les choses au fur et à mesure.

Je t'ai demandé PLUSIEURS FOIS QUEL SERAIT LE DESIGN FINAL !
Cela suppose aussi de dire ce que tu comptes mettre comme type de contenu dans les différentes cases...

Jusqu'ici, il n'avait jamais été question de cette case/zone "contenu Brown" !

Commence par mettre de l'ordre dans tes idées.

**mioummioum** · 20/08/2015, 20h44

Désolée jreaux je veux pas que tu te fâches.

Je pensais que mes imprim écran étaient parlants, je ne reprocherai jamais à personne de vouloir m'aider.

Le dernier exemple posté correspond vraiment à mes attentes.

Je n'arrive juste pas à étirer cette div "brown".

Si tu veux plus m'aider dis le moi je comprendrai.

Une div float plus gourmande que moi

CSS

Discussions similaires

Partager

Partager