Align Div at bottom on main Div

Question

I have two divs  one inside the other and I would like the small div to be aligned at the buttom of the main div   Here s my code so far  Currently  the button is at the top of main div  instead I want it positioned at the bottom  Any help would be appreciated    vertical banner       border  1px solid  E9E3DD      float  left      height  210px      margin  2px      padding  4px 2px 10px 10px      text-align  left      width  117px      bottom link   vertical-align  bottom      Here s how I ve been trying to use it  but as you can see I m still new to CSS      lt div class  vertical banner  gt       lt div id  bottom link  gt            lt input type  submit  value  Continue  gt          lt  div gt   lt  div gt

User · Answer

I guess you ll need absolute position   vertical banner  position relative    bottom link position absolute  bottom 0

User · Answer

Please try this    b   display  -webkit-inline-flex  display  -moz-inline-flex  display  inline-flex   -webkit-flex-flow  row nowrap  -moz-flex-flow  row nowrap  flex-flow  row nowrap   -webkit-align-items  flex-end  -moz-align-items  flex-end  align-items  flex-end     Here s a JSFiddle demo  http   jsfiddle net rudiedirkx 7FGKN

User · Answer

Give your parent div position  relative  then give your child div position  absolute  this will absolute position the div inside of its parent  then you can give the child bottom  0px   See example here   http   jsfiddle net PGMqs 1

User · Answer

Modify your CSS like this    x000D   x000D   vertical banner   x000D      border  1px solid  E9E3DD  x000D      float  left  x000D      height  210px  x000D      margin  2px  x000D      padding  4px 2px 10px 10px  x000D      text-align  left  x000D      width  117px  x000D      position relative  x000D    x000D   x000D   bottom link  x000D     position absolute                      added    x000D     bottom 0                               added    x000D     left 0                               added    x000D    x000D   lt div class  vertical banner  gt  x000D       lt div id  bottom link  gt  x000D            lt input type  submit  value  Continue  gt  x000D          lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

This isn t really possible in HTML unless you use absolute positioning or javascript  So one solution would be to give this CSS to  bottom link    bottom link       position absolute      bottom 0      Otherwise you d have to use some javascript  Here s a jQuery block that should do the trick  depending on the simplicity of the page       bottom link   css       position   relative       top    this  parent   height   -   this  height

[html] Align Div at bottom on main Div

Examples related to html

Examples related to css