Exercice 16/25

  • Dans le fichier stylesheet.css, ajoutez la propriété clear et sa valeur both au div qui a l'id #footer;
  • Cliquez sur soumettre ma réponse pour vérifier vos résultats;

Leçon 16/25

En utilisant la propriété float, vous pourrez rencontrer des situations où le comportement de vos éléments HTML n'est pas celui que vous attendiez. Certains éléments se retrouvant les uns au-dessus/dessous des autres.

C'est le cas, dans cet exercice, de l'élément div avec l'id footer. Il devrait se trouver en bas de page. Mais il se retrouve tout en haut car les autres éléments flottent et il a donc pris leur place.

Il existe une propriété CSS qui permet d'annuler ce comportement et de repositionner un élément HTML à son emplacement par défaut :

clear: (left|right|both)

Si vous dites à un élément clear: left, il se déplacera immédiatement en dessous de tout élément flottant sur la gauche. La valeur right a le même effet, mais pour des éléments flottant sur la droite.. Si vous lui dites clear: both, les éléments flottant à gauche et à droite seront pris en compte.

Commentaires les mieux notés

  • enzo44200

    Bonjour Dans votre description vous avez écrit ceci : Mais il se retrouve tout en haut car les autres éléments flottent et il a donc pris leur place. j'ai envie de vous dire car quoi ?? ;) ;) ;) Cordialement

  • mram Administrateur

    Où voulez-vous en venir, j'ai pas compris... ?

  • nkeshimanabrice-37

    Bonjour; je vois pas de DIV dans le CSS

  • Joris.deschamps06-22

    c'est bon j'ai trouvé mon erreur, j'avais aussi écrit clear: both dans l'id header !

4 Commentaires

  • enzo44200

    enzo44200

    Bonjour Dans votre description vous avez écrit ceci : Mais il se retrouve tout en haut car les autres éléments flottent et il a donc pris leur place. j'ai envie de vous dire car quoi ?? ;) ;) ;) Cordialement

    le 29/11/2016 à 12h38

  • mram

    mram Administrateur

    Où voulez-vous en venir, j'ai pas compris... ?

    le 30/11/2016 à 16h41

  • nkeshimanabrice-37

    nkeshimanabrice-37

    Bonjour; je vois pas de DIV dans le CSS

    le 19/10/2018 à 13h41

  • meriam

    meriam Administrateur

    Lisez bien l'énoncé, il y a une div avec l'id =footer (ligne 10)

    le 19/10/2018 à 14h27

  • Joris.deschamps06-22

    Joris.deschamps06-22

    c'est bon j'ai trouvé mon erreur, j'avais aussi écrit clear: both dans l'id header !

    le 22/11/2018 à 14h36

index.html
stylesheet.css
<!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css" /> <title>Le positionnement flottant (gauche et droite)</title> </head> <body> <div id="header">Je flotte à droite</div> <p><strong>Je flotte à gauche.</strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <div id="footer">Je suis dans le flux courant.</div> </body> </html>
#header { height: 100px; width: 100px; border: 2px solid black; border-radius: 5px; background-color: #4D94FF; float: right; } p { width: 300px; float: left; } #footer { height: 50px; background-color: #ff9933; }