Comment faire flotter un div au fond de son conteneur?

J'ai flotté des images et des encadrés en haut d'un conteneur en utilisant float: right (or left) plusieurs fois. Récemment, j'ai ressenti le besoin de faire flotter un div dans le coin inférieur droit d'un autre div avec l'habillage de texte normal que vous obtenez avec float (texte enveloppé au-dessus et à gauche uniquement).

Je pensais que cela devait être relativement facile, même si float n'a pas de valeur minimale, mais je n'ai pas pu le faire en utilisant un certain nombre de techniques et la recherche sur le Web n'a rien trouvé d'autre que d'utiliser un positionnement absolu, mais cela ne fonctionne pas donner le comportement de retour à la ligne correct.

J'avais pensé que ce serait une conception très courante, mais apparemment ce n'est pas le cas. Si personne n'a de suggestion, je devrai diviser mon texte dans des zones distinctes et aligner la div manuellement, mais c'est plutôt précaire et je détesterais devoir le faire sur chaque page qui en a besoin.

EDIT: Juste une note pour quiconque vient ici. La question liée ci-dessus en tant que doublon n'est en fait pas un doublon. L'exigence que le texte entoure l'élément inséré le rend complètement différent. En fait, la réponse à la réponse la plus votée ici montre clairement pourquoi la réponse dans la question liée est erronée en tant que réponse à cette question. Quoi qu'il en soit, il ne semble toujours pas y avoir de solution générale à ce problème, mais certaines des solutions publiées ici et dans la question liée peuvent fonctionner pour des cas spécifiques.

Définissez le div parent sur position: relative, puis le div intérieur sur ...

position: absolute; 
bottom: 0;

... et c'est parti :)

Un moyen de le faire fonctionner est le suivant:

• Flottez vos éléments laissés comme d'habitude

• Faites pivoter la div parent de 180 degrés à l'aide de

  -moz-transform:rotate(180deg);
  -webkit-transform:rotate(180deg);
  -o-transform:rotate(180deg);
  -ms-transform:rotate(180deg);
  filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);

  JSfiddle: http://jsfiddle.net/wcneY/

• Maintenant, faites pivoter tous les éléments qui flottent à gauche (donnez-leur une classe) à 180 degrés pour les remettre en place. Voila! ils flottent au fond.

Après avoir lutté avec diverses techniques pendant quelques jours, je dois dire que cela semble impossible. Même en utilisant javascript (ce que je ne veux pas faire) cela ne semble pas possible.

Pour clarifier pour ceux qui n'ont peut-être pas compris - c'est ce que je recherche: en publiant, il est assez courant de mettre en page un encart (image, tableau, figure, etc.) de sorte que son bas soit aligné avec le bas du dernier ligne de texte d'un bloc (ou d'une page) avec du texte qui circule naturellement dans l'encart au-dessus et à droite ou à gauche selon le côté de la page où l'encart se trouve. En html / css, il est trivial d'utiliser le style float pour aligner le haut d'un encart avec le haut d'un bloc, mais à ma grande surprise, il semble impossible d'aligner le bas du texte et de l'encart malgré le fait qu'il s'agit d'une tâche de mise en page courante .

Je suppose que je devrai revoir les objectifs de conception de cet article à moins que quelqu'un n'ait une suggestion de dernière minute.

J'ai obtenu cela dans JQuery en plaçant un élément d'entretoise de largeur nulle au-dessus du flotteur droit, puis en dimensionnant l'entretoise (ou le tuyau) en fonction de la hauteur du parent moins la taille flottante de l'enfant.

Avant que js n'intervienne, j'utilise l'approche absolue de la position, qui fonctionne mais permet le flux de texte derrière. Par conséquent, je passe en position statique pour permettre l'approche de la jambe de force. (l'en-tête est l'élément parent, la découpe est celle que je veux en bas à droite et le tuyau est ma jambe de force)

$("header .pipe").each(function(){
    $(this).next(".cutout").css("position","static");       
    $(this).height($(this).parent().height()-$(this).next(".cutout").height());                                                 
});

CSS

header{
    position: relative; 
}

header img.cutout{
    float:right;
    position:absolute;
    bottom:0;
    right:0;
    clear:right
}
header .pipe{
    width:0px; 
    float:right

}

Le tuyau doit venir en premier, puis la découpe, puis le texte dans l'ordre HTML.

Cela met un div fixe en bas de la page et se fixe en bas lorsque vous faites défiler vers le bas

#div {
    left: 0;
    position: fixed;
    text-align: center;
    bottom: 0;
    width: 100%;
}

Placez le div dans un autre div et définissez le style du div parent sur position:relative;Then sur le div enfant, définissez les propriétés CSS suivantes:position:absolute; bottom:0;

Si vous êtes d'accord avec seulement la ligne la plus basse du texte allant sur le côté du bloc (par opposition à complètement autour et en dessous, ce que vous ne pouvez pas faire sans terminer le bloc et en commencer un nouveau), c'est pas impossible de faire flotter un bloc à l'un des coins inférieurs d'un bloc parent. Si vous placez du contenu dans une balise de paragraphe dans un bloc et que vous souhaitez faire flotter un lien dans le coin inférieur droit du bloc, placez le lien dans le bloc de paragraphe et définissez-le sur float: right, puis placez une balise div avec clear : les deux sont placés juste en dessous de la fin de la balise de paragraphe. La dernière div est de s'assurer que la balise parent entoure les balises flottantes.

<div class="article" style="display: block;">
    <h3>title</h3>
        <p>
            text content
            <a href="#" style="display: block;float: right;">Read More</a>
        </p>
    <div style="clear: both;"></div>
</div>

Si vous définissez l'élément parent sur position: relative, vous pouvez définir l'enfant sur la position de réglage inférieure: absolue; et en bas: 0;

#outer {
  width:10em;
  height:10em;
  background-color:blue;
  position:relative; 
}

#inner {
  position:absolute;
  bottom:0;
  background-color:white; 
}

<div id="outer">
  <div id="inner">
    <h1>done</h1>
  </div>
</div>
  

Si vous voulez que le texte se termine bien: -

.outer {
  display: table;
}

.inner {
  height: 200px;
  display: table-cell;
  vertical-align: bottom;
}

/* Just for styling */
.inner {
  background: #eee;
  padding: 0 20px;
}

<!-- Need two parent elements -->
<div class="outer">
  <div class="inner">
    <h3>Sample Heading</h3>
    <p>Sample Paragragh</p>
  </div>
</div>

Je sais que ce truc est vieux, mais j'ai récemment rencontré ce problème.

utiliser des conseils de divs de position absolue est vraiment stupide, parce que le flottant perd en quelque sorte le point avec des positions absolues ..

maintenant, je n'ai pas trouvé de solution universelle, mais dans de nombreux cas, prople utilise des divs flottants juste pour afficher quelque chose d'affilée, comme une série d'éléments span. et vous ne pouvez pas l'aligner verticalement.

pour obtenir un effet similaire, vous pouvez le faire: ne faites pas flotter le div, mais définissez sa propriété d'affichage sur inline-block. alors vous pouvez l'aligner verticalement comme bon vous semble. il vous suffit de la propriété des parents div ensemble vertical-alignsoit top, bottom, middleoubaseline

J'espère que cela aide quelqu'un

Avec l'introduction de Flexbox , cela est devenu assez facile sans beaucoup de piratage. align-self: flex-endsur l'élément enfant l'alignera le long de l' axe transversal .

.container {
  display: flex;
}
.bottom {
  align-self: flex-end;
}

<div class="container">
  <div class="bottom">Bottom of the container</div>
</div>

Production:

.container {
  display: flex;
  /* Material design shadow */
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  height: 100px;
  width: 175px;
  padding: 10px;
  background: #fff;
  font-family: Roboto;
}
.bottom {
  align-self: flex-end;
}

<div class="container">
  <div class="bottom">Bottom of the container</div>
</div>

J'avais également trouvé cette solution pendant longtemps. Voici ce que j'obtiens:

align-self: flex-end;

lien: https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/ Cependant, je ne me souviens pas d'où j'ai ouvert ce lien. J'espère que ça aide

Je ferais juste un tableau.

<div class="elastic">
  <div class="elastic_col valign-bottom">
    bottom-aligned content.
  </div>
</div>

Et le CSS:

.elastic {
  display: table;
}
.elastic_col {
  display: table-cell;
}
.valign-bottom {
  vertical-align: bottom;
}

Voyez-le en action:
http://jsfiddle.net/mLphM/1/

J'ai essayé plusieurs de ces techniques, et les suivantes ont fonctionné pour moi, donc si tout le reste ici si tout le reste échoue, essayez ceci parce que cela a fonctionné pour moi :).

<style>
  #footer {
    height:30px;
    margin: 0;
    clear: both;
    width:100%;
    position: relative;
    bottom:-10;
  }
</style>

<div id="footer" >Sportkin - the registry for sport</div>

A a choisi cette approche de @ dave-kok. Mais cela ne fonctionne que si tout le contenu convient sans défilement. J'apprécie si quelqu'un s'améliore

outer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
}
.space {
    float: right;
    height: 75%;  
}
.floateable {
    width: 40%;
    height: 25%;
    float: right;
    clear: right;  
 }

Voici le code http://jsfiddle.net/d9t9joh2/

Cela est désormais possible avec la boîte flexible. Réglez simplement l '«affichage» du div parent sur «flex» et définissez la propriété «margin-top» sur «auto». Cela ne déforme aucune propriété des deux div.

.parent {
  display: flex;
  height: 100px;
  border: solid 1px #0f0f0f;
}
.child {
  margin-top: auto;
  border: solid 1px #000;
  width: 40px;
  word-break: break-all;
}

<div class=" parent">
  <div class="child">I am at the bottom!</div>
</div>

Pas sûr, mais un scénario publié plus tôt semblait fonctionner si vous utilisez position: relative au lieu d'absolu sur la division enfant.

#parent {
  width: 780px;
  height: 250px;
  background: yellow;
  border: solid 2px red;
}
#child {
  position: relative;
  height: 50px;
  width: 780px;
  top: 100%;
  margin-top: -50px;
  background: blue;
  border: solid 2px green;
}

<div id="parent">
    This has some text in it.

    <div id="child">
        This is just some text to show at the bottom of the page
    </div>
</div>

Et pas de tables ...!

Si vous avez besoin d'un alignement relatif et que les DIV ne vous donnent toujours pas ce que vous voulez, utilisez simplement des tableaux et définissez valign = "bottom" dans la cellule dont vous voulez que le contenu soit aligné en bas. Je sais que ce n'est pas une excellente réponse à votre question car les DIV sont censés remplacer les tableaux, mais c'est ce que j'ai dû faire récemment avec une légende d'image et cela a fonctionné parfaitement jusqu'à présent.

J'ai également essayé ce scénario publié plus tôt;

div {
  position: absolute; 
  height: 100px; 
  top: 100%; 
  margin-top:-100px; 
}

Le positionnement absolu fixe le div à la partie la plus basse du navigateur lors du chargement de la page, mais lorsque vous faites défiler vers le bas si la page est plus longue, elle ne défile pas avec vous. J'ai changé le positionnement pour qu'il soit relatif et cela fonctionne parfaitement. Le div va directement au fond lors de la charge, vous ne le verrez donc pas avant d'arriver au fond.

div {
      position: relative;
      height:100px; /* Or the height of your image */
      top: 100%;
      margin-top: -100px;
}

Une approche intéressante consiste à empiler quelques éléments flottants droits les uns sur les autres.

<div>
<div style="float:right;height:200px;"></div>
<div style="float:right;clear:right;">Floated content</div>
<p>Other content</p>
</div>

Le seul problème est que cela ne fonctionne que lorsque vous connaissez la hauteur de la boîte.

La réponse de Stu est la plus proche de travailler jusqu'à présent, mais elle ne tient toujours pas compte du fait que la hauteur de votre div externe peut changer, en fonction de la façon dont le texte s'enroule à l'intérieur. Ainsi, le repositionnement du div intérieur (en changeant la hauteur du "tuyau") une seule fois ne sera pas suffisant. Ce changement doit se produire à l'intérieur d'une boucle, afin que vous puissiez continuellement vérifier si vous avez encore atteint le bon positionnement et réajuster si nécessaire.

Le CSS de la réponse précédente est toujours parfaitement valide:

#outer {
    position: relative; 
}

#inner {
    float:right;
    position:absolute;
    bottom:0;
    right:0;
    clear:right
}

.pipe {
    width:0px; 
    float:right

}

Cependant, le Javascript devrait ressembler davantage à ceci:

var innerBottom;
var totalHeight;
var hadToReduce = false;
var i = 0;
jQuery("#inner").css("position","static");
while(true) {

    // Prevent endless loop
    i++;
    if (i > 5000) { break; }

    totalHeight = jQuery('#outer').outerHeight();
    innerBottom = jQuery("#inner").position().top + jQuery("#inner").outerHeight();
    if (innerBottom < totalHeight) {
        if (hadToReduce !== true) { 
            jQuery(".pipe").css('height', '' + (jQuery(".pipe").height() + 1) + 'px');
        } else { break; }
    } else if (innerBottom > totalHeight) {
        jQuery(".pipe").css('height', '' + (jQuery(".pipe").height() - 1) + 'px');
        hadToReduce = true;
    } else { break; }
}

Je sais que c'est un fil très ancien mais je voudrais quand même répondre. Si quelqu'un suit les css et html ci-dessous, alors cela fonctionne. Le div de pied de page enfant collera avec le fond comme de la colle.

<style>
        #MainDiv
        {
            height: 300px;
            width: 300px;
            background-color: Red;
            position: relative;
        }

        #footerDiv
        {
            height: 50px;
            width: 300px;
            background-color: green;
            float: right;
            position: absolute;
            bottom: 0px;
        }
    </style>


<div id="MainDiv">
     <div id="footerDiv">
     </div>
</div>

Pour utiliser la margin-toppropriété css dans le but de placer le pied de page au bas de son conteneur. Et d'utiliser la text-align-lastpropriété css pour définir le contenu du pied de page au centre.

 <div class="container" style="margin-top: 700px;  text-align-last: center; ">
      <p>My footer Here</p>  
 </div>

Oh, les jeunes .... Vous êtes ici:

<div class="block">
    <a href="#">Some Content with a very long description. Could be a Loren Ipsum or something like that.</a>
    <span>
        <span class="r-b">A right-bottom-block with some information</span>
    </span>
    <span class="clearfix"></span>
</div>
<style>
    .block {
        border: #000 solid 1px;
    }

    .r-b {
        border: #f00 solid 1px;
        background-color: fuchsia;
        float: right;
        width: 33%
    }

    .clearfix::after {
        display: block;
        clear: both;
        content: "";
    }
</style>

Pas de position absolue! Sensible! Vieille école

Assez vieille question, mais quand même ... Vous pouvez faire flotter un div au bas de la page comme ceci:

div{
  position: absolute; 
  height: 100px; 
  top: 100%; 
  margin-top:-100px; 
}

Vous pouvez voir où la magie opère. Je pense que vous pourriez faire de même pour le faire flotter au bas d'une div parent.

simple ...... dans le fichier html à droite .... ayez le "footer" (ou le div que vous voulez en bas) en bas. Alors ne faites pas ça:

<div id="container">
    <div id="Header"></div>
    <div id="Footer"></div>
    <div id="Content"></div>
    <div id="Sidebar"></div>
</div>

FAITES CECI: (ayez le pied de page en dessous.)

<div id="container">
    <div id="Header"></div>
    <div id="Content"></div>
    <div id="Sidebar"></div>
    <div id="Footer"></div>
</div>

Après cela, vous pouvez aller dans le fichier css et faire flotter la "barre latérale" vers la gauche. puis faites flotter le "contenu" vers la droite, puis "pied de page" effacez les deux.

cela devrait fonctionner.

J'ai obtenu que cela fonctionne du premier coup en ajoutant position:absolute; bottom:0;à l'ID div à l'intérieur du CSS. Je n'ai pas ajouté le style parentposition:relative; .

Il fonctionne parfaitement dans Firefox et IE 8, ne l'ont pas encore essayé dans IE 7.

une autre réponse est l'utilisation judicieuse des tables et des lignes. en définissant toutes les cellules du tableau sur la ligne précédente (à l'exception de celle du contenu principal) sur rowpan = "2", vous obtiendrez toujours un trou d'une cellule au bas de votre cellule de tableau principale que vous pouvez toujours mettre valign = "bottom".

Vous pouvez également définir sa hauteur pour être le minimum dont vous avez besoin pour une ligne. Ainsi, vous obtiendrez toujours votre ligne de texte préférée en bas, quel que soit l'espace occupé par le reste du texte.

J'ai essayé toutes les réponses div, je n'ai pas pu les faire faire ce dont j'avais besoin.

<table>
<tr>
   <td valign="top">
     this is just some random text
     <br> that should be a couple of lines long and
     <br> is at the top of where we need the bottom tag line
   </td>
   <td rowspan="2">
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     is really<br/>
     tall
  </td>
</tr>
<tr>
  <td valign="bottom">
      now this is the tagline we need on the bottom
  </td>
</tr>
</table>

voici ma solution:

<style>
.sidebar-left{float:left;width:200px}
.content-right{float:right;width:700px}

.footer{clear:both;position:relative;height:1px;width:900px}
.bottom-element{position:absolute;top:-200px;left:0;height:200px;}

</style>

<div class="sidebar-left"> <p>content...</p></div>
<div class="content-right"> <p>content content content content...</p></div>

<div class="footer">
    <div class="bottom-element">bottom-element-in-sidebar</div>
</div>

Vous pouvez essayer d'utiliser un élément vide avec une largeur de 1px et le faire flotter. Désactivez ensuite l'élément que vous souhaitez réellement positionner et utilisez la hauteur de l'élément vide pour contrôler jusqu'où il va.

http://codepen.io/cssgrid/pen/KNYrey/

.invisible {
float: left;  
}

.bottom {
float: left;
padding-right: 35px;
padding-top: 30px;
clear: left;
}