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

14 Commentaires

  • patricia.schonmetz-4

    patricia.schonmetz-4

    Merci de votre aide

    le 17/02/2022 à 13h55

  • meriam

    meriam Admin

    Je vous en prie. N'hésitez pas à demander de l'aide si vous trouvez des problèmes dans les exercices suivants.

    le 17/02/2022 à 14h06

  • patricia.schonmetz-4

    patricia.schonmetz-4

    je ne comprends pourquoi il est écrit : Vous devez modifier 3 propriété css de la balise div ayant pour id #footer

    le 14/02/2022 à 15h35

  • meriam

    meriam Admin

    Il vous manque la propriété background-color et la valeur #ff9933;

    le 14/02/2022 à 22h30

  • meriam

    meriam Admin

    C'est une propriété qui se trouve dans le code initial.

    le 14/02/2022 à 22h31

  • patricia.schonmetz-4

    patricia.schonmetz-4

    Bonjour,

    le 14/02/2022 à 15h35

  • meriam

    meriam Admin

    Vous avez supprimé la propriété background-color.

    le 14/02/2022 à 22h35

  • 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 à 12h36

  • nkeshimanabrice-37

    nkeshimanabrice-37

    Bonjour; je vois pas de DIV dans le CSS

    le 19/10/2018 à 09h41

  • meriam

    meriam Admin

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

    le 19/10/2018 à 10h27

  • mram

    mram Admin

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

    le 30/11/2016 à 14h41

  • 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 à 10h38

Pour publier un commentaire, vous devez vous connecter.
stylesheet.css
index.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; }
<!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>
http://localhost:8080