Positionnement dans le flux avec un élément en float
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:
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:
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 ?
