1. #1
    Membre émérite

    Homme Profil pro
    Webmaster débutant
    Inscrit en
    octobre 2006
    Messages
    6 215
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant
    Secteur : Industrie

    Informations forums :
    Inscription : octobre 2006
    Messages : 6 215
    Points : 2 620
    Points
    2 620
    Billets dans le blog
    1

    Par défaut 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 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 ?
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

  2. #2
    Membre éprouvé
    Homme Profil pro
    Développeur multimédia
    Inscrit en
    juillet 2004
    Messages
    693
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur multimédia
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : juillet 2004
    Messages : 693
    Points : 1 161
    Points
    1 161

    Par défaut

    salut as tu essayé le clear?

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
    footer{
      clear:both;
    }

  3. #3
    Membre émérite

    Homme Profil pro
    Webmaster débutant
    Inscrit en
    octobre 2006
    Messages
    6 215
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant
    Secteur : Industrie

    Informations forums :
    Inscription : octobre 2006
    Messages : 6 215
    Points : 2 620
    Points
    2 620
    Billets dans le blog
    1

    Par défaut

    Merci ; je n'avais pas eu ce réflexe mais c'est la bonne solution.
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

  4. #4
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 611
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 10 611
    Points : 21 243
    Points
    21 243

    Par défaut

    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 :

    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 :
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  5. #5
    Membre émérite

    Homme Profil pro
    Webmaster débutant
    Inscrit en
    octobre 2006
    Messages
    6 215
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant
    Secteur : Industrie

    Informations forums :
    Inscription : octobre 2006
    Messages : 6 215
    Points : 2 620
    Points
    2 620
    Billets dans le blog
    1

    Par défaut

    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é.
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

  6. #6
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 611
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 10 611
    Points : 21 243
    Points
    21 243

    Par défaut

    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> ???
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  7. #7
    Membre émérite

    Homme Profil pro
    Webmaster débutant
    Inscrit en
    octobre 2006
    Messages
    6 215
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant
    Secteur : Industrie

    Informations forums :
    Inscription : octobre 2006
    Messages : 6 215
    Points : 2 620
    Points
    2 620
    Billets dans le blog
    1

    Par défaut

    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é...
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Ordre des éléments dans le flux de sortie
    Par mbr44 dans le forum Fonctions
    Réponses: 3
    Dernier message: 26/07/2007, 17h35
  2. se positionner dans une Liste avec sa value
    Par anthropo dans le forum JavaScript
    Réponses: 1
    Dernier message: 22/06/2007, 08h56
  3. Bug Firefox positionnement "dans le flux normal"
    Par thierryyyyyyy dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 29/04/2007, 13h16
  4. Réponses: 12
    Dernier message: 12/03/2007, 17h58
  5. probleme de blanc dans un tableau avec les positionnements en css
    Par rich25200 dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 07/02/2007, 00h50

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo