Tutorial :Keep div at the bottom of another div - css



Question:

© 1965 - 2010

I want the #copyright to be at the bottom of #outer

Here is the css for #copyright

#copyright{      position:relative; margin-bottom:0px; width:672px; height:20px; color:#FFF;  }  #yr{      margin:auto;  }    #f{ position:absolute; right:0px; text-align:center;  }  

Thanks Jean


Solution:1

#copyright {      position: absolute;      bottom: 0;  }  #outer {      position: relative;  }  

This will have the unfortunate side effect though that #copyright does not count towards the height of #outer anymore, in your example #outer would be 0px high. You can add a bottom-padding to #outer if you're working with fixed heights.

#copyright {      position: absolute;      bottom: 0;      height: 200px;  }  #outer {      position: relative;      padding-bottom: 200px;  }  


Solution:2

  1. define height of #outer
  2. set #outer to position:relative;
  3. set #copyright to position:absolute; bottom: 0; left: 0;

    #outer { height: 100px; border: 1px solid red; position: relative; }
    #copyright { position:absolute; height: 30px; bottom: 0; left: 0; border: 1px solid black; width: 300px; }

    <div id="outer">     <div id="copyright">         <span id="yr">© 1965 - 2010</span>         <span id="f"></span>         <span id="d"><span>     </div>  </div>  

Also, never use "0px". There is no such thing as zero pixels, only zero. Correct way is "right: 0;"


Solution:3

I would do that this way:

#copyright {  position: absolute;  bottom: 0;  }  #outer {  position: relative;  height: 200px;  }    <div id=outer>      <div id="copyright">      <span id="yr">&copy; 1965 - 2010</span>      <span id="f"></span>      <span id="d"></span>  </div>        </div>  


Solution:4

Change the positioning on #copyright to absolute and add a relative positioning context to #outer. Then add bottom: 0px to #copyright as well.

Sorry. CSS would look like:

#copyright{     position:absolute; margin-bottom:0px; width:672px; height:20px; color:#FFF; bottom: 0px;  }  #yr{     margin:auto;  }  #f{     position:absolute; right:0px; text-align:center;  }  #outer {     position: relative;  }  


Solution:5

You may use this http://codepen.io/anon/pen/KwmMyb :

#outer_div {    position: fixed;    top: 0;    left: 0;    width: 100%;    height: 100%;  }  #inner_div {    width: 100%;    height: 100px;    position: absolute;    bottom: 0;    margin: 0 auto;    background: red;  }
<div id="outer_div">    <div id="inner_div"></div>  </div>

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »