Positionnement dans le flux avec un élément en float

**laurentSc** · 18/11/2017, 23h48

Bonsoir,

je fais des tests pour comprendre le positionnement CSS et suis tombé sur un cas que je ne comprend pas : https://codepen.io/laurentsc/pen/rYpmom/

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
 
<header>
	Ceci est mon haut de page 
</header>
<main>
  <div id="sid_cont">
	<div id="sidebar">
		Ceci est ma colonne latérale
	</div><!--fin div sidebar-->
	<div id="contenu">
		 Ceci est mon contenu principal
	</div><!--fin div contenu-->
  </div><!--fin div sid_cont-->
</main>
<footer>
		Ceci est mon pied de page
</footer>

Code css :

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

1
2
3
4
5
6
7
8
main {
  width:760px; 
  margin:0 auto;}
#sidebar {
  float:left;
  height:200px;}
#contenu {
  height:100px;}

Dans cet exemple où j'ai mis le sidebar plus haut que le contenu, le footer se met sous le contenu alors que je voudrais qu'il se mette complètement à gauche, ce qui est le cas si le sidebar a une hauteur inférieure ou égale à celle du contenu.
Comment résoudre ce cas de figure ?

**headmax** · 19/11/2017, 00h23

salut as tu essayé le clear?

Code css :

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

1
2
3
4
 
footer{
  clear:both;
}

**laurentSc** · 19/11/2017, 10h29

Merci ; je n'avais pas eu ce réflexe mais c'est la bonne solution.

Invité · 19/11/2017, 10h43

Bonjour Laurent,

manifestement, tu n'apprends rien...

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
<body>
  <header>
    Ceci est mon haut de page
  </header>
  <main>
      <aside>
        Ceci est ma colonne latérale
      </aside>
      <div id="contenu">
        Ceci est mon contenu principal
      </div>
  </main>
  <footer>
    Ceci est mon pied de page
  </footer>
</body>

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
* { padding:0; margin:0; border:0; box-sizing:border-box; }
 
/* contenu */
main {
  display:table; 
  width:100%;
}
main aside,
main #contenu
{
  display:table-cell; 
  vertical-align:top;
}
main aside {
  width:20%;
}
main #contenu {
  width:80%;
}
 
/* DECO */
main aside {
  border:1px solid green;
}
main #contenu {
  border:1px solid purple;
}
body > header,
body > footer,
main aside,
main #contenu
{ 
  padding:10px;
}

N.B. On peut arriver à un meilleur résultat avec flex, mais ça, c'est une autre histoire...

CELA DIT, et pour répondre à ta QUESTION :

Comment faire pour qu'un conteneur englobe ses enfants flottants ?

Un élément flottant (doté de la propriété float avec les valeurs left ou right) est partiellement retiré du flux normal vis-à-vis de son bloc conteneur.

Et comme tu manques de REFLEXE :

FAQ CSS

**laurentSc** · 19/11/2017, 11h10

Bonjour Jérôme,

je ne dirais pas ça car j'avais bien pensé à aside (par exemple), mais j'étais parti d'un exemple que je voulais faire marcher en changeant le moins possible le code proposé.

Invité · 19/11/2017, 11h14

ARRETE DE FAIRE N'IMPORTE QUOI !

Ca t'apporte quoi ??
A part un plus plus de CONFUSION !

On est en train de T'APPRENDRE à utiliser - et à PENSER à - display:table; !

Pourquoi revenir EN ARRIERE ??

[EDIT] As-tu regarder la DATE du tuto ? Décembre 2007 !!

C'est quoi ta prochaine étape ? Utiliser des <frameset> ???

**laurentSc** · 19/11/2017, 11h33

En fait, c'était justement en cherchant sur le net des trucs qui parlaient du positionnement mais c'est vrai que si j'avais regardé la date du tuto, ça m'aurait alerté...

Positionnement dans le flux avec un élément en float

Positionnement en CSS

Discussions similaires

Partager

Partager