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 ?