How can I position my div at the bottom of its container

Question

Given the following HTML   x000D   x000D   lt div id  container  gt     lt  -- Other elements here -- gt     lt div id  copyright  gt      Copyright Foo web designs    lt  div gt   lt  div gt  x000D   x000D   x000D   I would like  copyright to stick to the bottom of  container  Can I achieve this without using absolute positioning

User · Answer

x000D   x000D    container width 100   float left  position relative   x000D   copyright position absolute  bottom 0px  left 0px  background  F00  width 100    x000D   container background gray  height 100px   x000D   lt div id  container  gt  x000D     lt  -- Other elements here -- gt  x000D     lt div id  copyright  gt  x000D      Copyright Foo web designs x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D     x000D   x000D   lt div id  container  gt  x000D     lt  -- Other elements here -- gt  x000D     lt div id  copyright  gt  x000D      Copyright Foo web designs x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

For those only have one child in the container  you can use the table-cell and vertical-align approach which worked reliably for positioning a single div at the bottom of its parent   Note that using table-footer-group as other answers mentioned will break the height calculation of parent table    x000D   x000D   container   x000D      display  table  x000D      width  100   x000D      height  200px  x000D    x000D   item   x000D      display  table-cell  x000D      vertical-align  bottom  x000D    x000D   lt div id  container  gt  x000D       lt div id  item  gt Single bottom item lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Maybe this helps someone  You can always place the div outside the other div and then push it upwards using negative margin    lt div id  container  style  background-color   ccc  padding-bottom  30px   gt    Hello   lt  div gt   lt div id  copyright  style  margin-top  -20px   gt    Copyright Foo web designs  lt  div gt

User · Answer

CSS Grid  Since the usage of CSS Grid is increasing  I would like to suggest align-self to the element that is inside a grid container   align-self can contain any of the values  end  self-end  flex-end for the following example    x000D   x000D   parent   x000D    display  grid  x000D    x000D   x000D   child1   x000D    align-self  end  x000D    x000D   x000D     Extra Styling for Snippet    x000D   x000D   parent   x000D    height  150px  x000D    background   5548B0  x000D    color   fff  x000D    padding  10px  x000D    font-family  sans-serif  x000D    x000D   x000D   child1   x000D    height  50px  x000D    width  50px  x000D    background   6A67CE  x000D    text-align  center  x000D    vertical-align  middle  x000D    line-height  50px  x000D    x000D   lt div id  parent  gt  x000D     lt  -- Other elements here -- gt  x000D     lt div id  child1  gt  x000D      1 x000D     lt  div gt  x000D   x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Actually  the accepted answer by  User will only work if the window is tall and the content is short  But if the content is tall and the window is short  it will put the copyright info over the page content  and then scrolling down to see the content will leave you with a floating copyright notice  That makes this solution useless for most pages  like this page  actually    The most common way of doing this is the  CSS sticky footer  approach demonstrated  or a slightly slimmer variation  This approach works great -- IF you have a fixed height footer   If you need a variable height footer that will appear at the bottom of the window if the content is too short  and at the bottom of the content if the window is too short  what do you do   Swallow your pride and use a table   For example    x000D   x000D      x000D      padding  0  x000D      margin  0  x000D    x000D   x000D  html  body   x000D      height  100   x000D    x000D   x000D   container   x000D      height  100   x000D      border-collapse  collapse  x000D    x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   lt body gt  x000D       lt table id  container  gt  x000D           lt tr gt  x000D               lt td valign  top  gt  x000D                   lt div id  main  gt Lorem ipsum  etc  lt  div gt  x000D               lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D               lt td valign  bottom  gt  x000D                   lt div id  footer  gt Copyright some evil company    lt  div gt  x000D               lt  td gt  x000D           lt  tr gt  x000D       lt  table gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D    Try it out  This will work for any window size  for any amount of content  for any size footer  on every browser    even IE6   If you re cringing at the thought of using a table for layout  take a second to ask yourself why  CSS was supposed to make our lives easier -- and it has  overall -- but the fact is that even after all these years  it s still a broken  counter-intuitive mess  It can t solve every problem  It s incomplete   Tables aren t cool  but at least for now  they are sometimes the best way to solve a design problem

User · Answer

Div of style  position absolute bottom 5px width 100   is working   But it required more scrollup situation   window onscroll   function         var v   document getElementById  copyright        v style position    fixed       v style bottom    5px

User · Answer

CodePen link here    x000D   x000D  html  body   x000D      width  100   x000D      height  100   x000D    x000D   x000D   overlay   x000D      min-height  100   x000D      position  relative  x000D    x000D   x000D   container   x000D      width  900px  x000D      position  relative  x000D      padding-bottom  50px  x000D    x000D   x000D   height   x000D      width  900px  x000D      height  50px  x000D    x000D   x000D   footer   x000D      width  900px  x000D      height  50px  x000D      position  absolute  x000D      bottom  0  x000D    x000D   lt div class  overlay  gt  x000D       lt div class  container  gt  x000D           lt div class  height  gt  x000D              content x000D           lt  div gt  x000D       lt  div gt  x000D   x000D       lt div class  footer  gt  x000D          footer x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Using the translateY and top property  Just set element child to position  relative and than move it top  100   that s the 100  height of the parent  and stick to bottom of parent by transform  translateY -100    that s -100  of the height of the child    BenefitS   you do not take the element from the page flow it is dynamic   But still just workaround      copyright     position  relative     top  100      transform  translateY -100        Don t forget prefixes for the older browser

User · Answer

Yes you can do this without absolute positioning and without using tables  which screw with markup and such    DEMO This is tested to work on IE 7  chrome  FF  amp  is a really easy thing to add to your existing layout      lt div id  container  gt      Some content you don t want affected by the  bottom floating  div      lt div gt supports not just text lt  div gt        lt div class  foot  gt          Some other content you want kept to the bottom          lt div gt this is in a div lt  div gt       lt  div gt   lt  div gt       container       height 100       border-collapse collapse      display   table      foot       display   table-row      vertical-align   bottom      height   1px      It effectively does what float bottom would  even accounting for the issue pointed out in  Rick Reilly s answer

User · Answer

Try this    lt div id  container  gt     lt div style  height  100   border 1px solid  ff0000   gt     lt  -- Other elements here -- gt     lt  div gt   lt  div gt   lt div id  copyright  style  position relative border 1px solid  00ff00 top -25px  gt     Copyright Foo web designs  lt  div gt

User · Answer

Don t wanna use  position absolute  for sticky footer at bottom  Then you can do this way    x000D   x000D   html  x000D          body   x000D              height  100   x000D              margin  0  x000D            x000D           wrapper   x000D              min-height  100   x000D                 Equal to height of footer    x000D                 But also accounting for potential margin-bottom of last child    x000D              margin-bottom  -50px  x000D            x000D           footer  x000D              background   000  x000D              text-align  center  x000D              color   fff  x000D            x000D           footer  x000D           push   x000D              height  50px  x000D            x000D   lt html gt  x000D   lt body gt  x000D       lt  --HTML Code-- gt  x000D       lt div class  wrapper  gt  x000D           lt div class  content  gt content lt  div gt  x000D           lt div class  push  gt  lt  div gt  x000D       lt  div gt  x000D       lt footer class  footer  gt test lt  footer gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

If you want it to  stick  to the bottom  regardless of the height of container  then absolute positioning is the way to go  Of course  if the copyright element is the last in the container it ll always be at the bottom anyway   Can you expand on your question  Explain exactly what you re trying to do  and why you don t want to use absolute positioning

User · Answer

If you do not know the height of child block    x000D   x000D   parent   x000D      background green  x000D      width 200px  x000D      height 200px  x000D      display table-cell  x000D      vertical-align bottom  x000D    x000D   child   x000D      background red  x000D      vertical-align bottom  x000D    x000D   lt div id  parent  gt  x000D       lt div class  child  gt child x000D       lt  div gt   x000D   lt  div gt  x000D   x000D   x000D    http   jsbin com ULUXIFon 3 edit  If you know the height of the child block add the child block then add padding-top margin-top    x000D   x000D   parent   x000D      background green  x000D      width 200px  x000D      height 130px  x000D      padding-top 70px  x000D    x000D   child   x000D      background red  x000D      vertical-align  x000D      bottom  x000D      height 130px  x000D    x000D   lt div id  parent  gt  x000D       lt div class  child  gt child x000D       lt  div gt   x000D   lt  div gt    x000D   x000D   x000D

User · Answer

According  w3schools com     An element with position  absolute  is positioned relative to the   nearest positioned ancestor  instead of positioned relative to the   viewport  like fixed     So you need to position the parent element with something either relative or absolute  etc and position the desired element to absolute and latter set bottom to 0

User · Answer

Here is an approach targeted at making an element with a known height and width  at least approximately  float to the right and stay at the bottom  while behaving as an inline element to the other elements  It is focused at the bottom-right because you can place it easily in any other corner through other methods   I needed to make a navigation bar which would have the actual links at the bottom right  and random sibling elements  while ensuring that the bar itself stretched properly  without disrupting the layout  I used a  shadow  element to occupy the navigation bar s links  space and added it at the end of the container s child nodes      lt  DOCTYPE html gt   lt div id  container  gt     lt  -- Other elements here -- gt     lt div id  copyright  gt      Copyright Foo web designs    lt  div gt     lt span id  copyright-s  gt filler lt  span gt   lt  div gt    lt style gt     copyright       display inline-block      position absolute      bottom 0      right 0         copyright-s       float right      visibility hidden      width 20em        copyright style width        height 3em        copyright style height         lt  style gt

User · Answer

There is nothing called float bottom in CSS  The best way is using positioning in such cases   position absolute  bottom 0

User · Answer

Create another container div for the elements above  copyright  Just above copyright add a new div      lt div style  clear both   gt  lt  div gt  It will force the footer to be under everything else  just like in the case of using relative positioning  bottom 0px

User · Answer

Its an old question  but this is a unique approach that can help in several cases   Pure CSS  Without Absolute positioning  Without Fixing any Height  Cross-Browser  IE9    check out that Working Fiddle  Because normal flow is  top-to-bottom  we can t simply ask the  copyright div to stick to the bottom of his parent without absolutely positioning of some sort  But if we wanted the  copyright div to stick to the top of his parent  it will be very simple - because this is the normal flow way   So we will use this in our advantage  we will change the order of the divs in the HTML  now the  copyright div is at the top  and the content follow it right away  we also make the content div stretch all the way  using pseudo elements and clearing techniques   now it s just a matter of inverting that order back in the view  that can be easily done with CSS transform   We rotate the container by 180deg  and now  up-is-down   and we inverse back the content to look normal again   If we want to have a scroolbar within the content area  we need to apply a little bit more of CSS magic  as can be showed Here  in that example  the content is below a header - but its the same idea    x000D   x000D      x000D    margin  0  x000D    padding  0  x000D    x000D   x000D  html  x000D  body  x000D   Container   x000D    height  100   x000D    color  white  x000D    x000D   x000D   Container before   x000D    content      x000D    height  100   x000D    float  left  x000D    x000D   x000D   Copyright   x000D    background-color  green  x000D    x000D   x000D   Stretch   x000D    background-color  blue  x000D    x000D   x000D   Stretch after   x000D    content      x000D    display  block  x000D    clear  both  x000D    x000D   x000D   Container  x000D   Container gt div   x000D    -moz-transform  rotateX 180deg   x000D    -ms-transform  rotateX 180deg   x000D    -o-transform  rotate 180deg   x000D    -webkit-transform  rotateX 180deg   x000D    transform  rotateX 180deg   x000D    x000D   lt div id  Container  gt  x000D     lt div id  Copyright  gt  x000D      Copyright Foo web designs x000D     lt  div gt  x000D     lt div id  Stretch  gt  x000D       lt  -- Other elements here -- gt  x000D       lt div gt Element 1 lt  div gt  x000D       lt div gt Element 2 lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Also  if there s stipulations with using position absolute  or position relative   you can always try padding parent div or putting a margin-top x   Not a very good method in most cases  but it may come in handy in some cases

User · Answer

While none of the answers provided here seemed to apply or work in my particular case  I came across this article which provides this neat solution      container     display  table      copyright     display  table-footer-group      I find it very useful for applying responsive design for mobile display without having to reorder all the html code of a website  setting body itself as a table   Note that only the first table-footer-group or table-header-group will be rendered as such    if there are more than one  the others will be rendered as table-row-group

User · Answer

The flexbox approach   In supported browsers  you can use the following   Example Here     parent     display  flex    flex-direction  column     child     margin-top  auto       x000D   x000D   parent   x000D    height  100px  x000D    border  5px solid  000  x000D    display  flex  x000D    flex-direction  column  x000D    x000D   child   x000D    height  40px  x000D    width  100   x000D    background   f00  x000D    margin-top  auto  x000D    x000D   lt div class  parent  gt  x000D     lt div class  child  gt Align to the bottom lt  div gt  x000D   lt  div gt  x000D   x000D   x000D      The solution above is probably more flexible  however  here is an alternative solution   Example Here   parent     display  flex     child     align-self  flex-end       x000D   x000D   parent   x000D    height  100px  x000D    border  5px solid  000  x000D    display  flex  x000D    x000D   child   x000D    height  40px  x000D    width  100   x000D    background   f00  x000D    align-self  flex-end  x000D    x000D   lt div class  parent  gt  x000D     lt div class  child  gt Align to the bottom lt  div gt  x000D   lt  div gt  x000D   x000D   x000D      As a side note  you may want to add vendor prefixes for additional support

User · Answer

Just because this hasn t been mentioned at all  what usually works well in situations like yours    Placing the copyright-div after the container-div  You would only have to format the copyright-div in a similar way to the other container  same overall width  centering  etc    and all is fine   CSS    container   copyright       width  1000px      margin 0 auto      HTML    lt div id  container  gt       lt  -- Other elements here -- gt   lt  div gt    lt div id  copyright  gt      Copyright Foo web designs  lt  div gt    The only time this might not be ideal is when your container-div is declared with height 100   and the user would need to scroll down to see the copyright  But even still you could work around  e g  margin-top -20px - when the height of your copyright element is 20px     No absolute positioning No table layout No crazy css  that looks different in every other browser  well IE at least  you know  Simple and clear formatting   Aside  I know the OP asked for a solution that      sticks to the bottom of the  container  div       and not something under it  but come on  people are looking for good solutions here  and this is one

User · Answer

Likely not   Assign position relative to  container  and then position absolute  bottom 0  to  copyright      x000D   x000D   container   x000D      position  relative  x000D    x000D   copyright   x000D      position  absolute  x000D      bottom  0  x000D    x000D   lt div id  container  gt  x000D     lt  -- Other elements here -- gt  x000D     lt div id  copyright  gt  x000D      Copyright Foo web designs x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

You can indeed align the box to the bottom without using position absolute if you know the height of the  container using the text alignment feature of inline-block elements   Here you can see it in action   This is the code    container          So the  container most have a fixed height        height  300px      line-height  300px      background Red      container  gt             Restore Line height to Normal        line-height  1 2em      copyright       display inline-block      vertical-align bottom      width 100      Let it be a block        background green

[html] How can I position my div at the bottom of its container?

Examples related to html

Examples related to css