How can I send an inner div to the bottom of its parent div

Question

The div inside another div picture and code below  Because there will be text and images of the parent div  And red div will be the last element of the parent div      lt div style  width  200px  height  150px  border  1px solid black   gt       lt div style  width  100   height  50px  border  1px solid red   gt       lt  div gt   lt  div gt

User · Answer

Here is way to avoid absolute divs and tables if you know parent's height:

<div class="parent">
    <div class="child"> <a href="#">Home</a>
    </div>
</div>

CSS:

.parent {
    line-height:80px;
    border: 1px solid black;
}
.child {
    line-height:normal;
    display: inline-block;
    vertical-align:bottom;
    border: 1px solid red;
}

JsFiddle:

Example

User · Answer

Note   This is by no means the best possible way to do it    Situation   I had to do the same thign only i was not able to add any extra divs  therefore i was stuck with what i had and rather than removing innerHTML and creating another via javascript almost like 2 renders i needed to have the content at the bottom  animated bar    Solution   Given how tired I was at the time its seems normal to even think of such a method however I knew i had a parent DOM element which the bar s height was starting from   Rather than messing with the javascript any further i used a  NOT ALWAYS GOOD IDEA  CSS answer      -moz-transform rotate 180deg   -webkit-transform rotate 180deg   -ms-transform rotate 180deg     Yes thats correct  instead of positioning the DOM  i turned its parent upside down in css   For my scenario it will work  Possibly for others too   No Flame

User · Answer

Here is another pure CSS trick  which doesn t affect an elements flow    x000D   x000D   parent   x000D    min-height  100vh     set height as you need    x000D    display  flex  x000D    flex-direction  column  x000D    background  grey  x000D    x000D   child   x000D    margin-top  auto  x000D    background  green  x000D    x000D   lt div id  parent  gt  x000D     lt h1 gt Positioning with margin lt  h1 gt  x000D     lt div class  child  gt  x000D      Content to the bottom x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Make the outer div position  relative  and the inner div position  absolute  and set it s bottom  0

User · Answer

lt div style  width  200px  height  150px  border  1px solid black position relative  gt       lt div style  width  100   height  50px  border  1px solid red position absolute bottom 0  gt       lt  div gt   lt  div gt

User · Answer

You may not want absolute positioning because it breaks the reflow  in some circumstances  a better solution is to make the grandparent element display table  and the parent element display table-cell vertical-align bottom    After doing this  you should be able to give the the child elements display inline-block  and they will automagically flow towards the bottom of the parent

User · Answer

A flexbox way   HTML    lt div class  parent  gt     lt div gt Images  text  buttons oh my  lt  div gt     lt div gt Bottom lt  div gt   lt  div gt    CSS    parent     display  flex    flex-direction  column    justify-content  space-between         not necessary  just to visualize it      parent     height  500px    border  1px solid black       parent div     border  1px solid red        Edit   Source - Flexbox Guide  Browser support for flexbox - Caniuse

User · Answer

This is one way   lt div style  position  relative               width  200px               height  150px               border  1px solid black   gt        lt div style  position  absolute                   bottom  0                   width  100                    height  50px                   border  1px solid red   gt       lt  div gt   lt  div gt    But because the inner div is positioned absolutely  you ll always have to worry about other content in the outer div overlapping it  and you ll always have to set fixed heights    If you can do it  it s better to make that inner div the last DOM object in your outer div and have it set to  clear  both

[css] How can I send an inner <div> to the bottom of its parent <div>?

Examples related to css

Examples related to html