Align DIV s to bottom or baseline

Question

I m trying to align a child div tag to the bottom or baseline of the parent div tag   All I want to do is have the child Div at the baseline of the Parent Div  here is what it looks like now   HTML   lt div id  parentDiv  gt   lt div class  childDiv  gt  lt  div gt   lt  div gt    CSS   parentDiv     width 300px    height 300px    background-color  ccc    background-repeat repeat    parentDiv  childDiv     height 100px    width 30px    background-color  999      Note  I will have multiple childDivs with varying heights  and I ll need them all to align to the baseline bottom

User · Answer

x000D   x000D  td   x000D    height  150px  x000D    width  150px  x000D    text-align  center  x000D    x000D   x000D  b   x000D    border  1px solid black  x000D    x000D   x000D   child-2   x000D    vertical-align  bottom  x000D    x000D   x000D   child-3   x000D    vertical-align  top  x000D    x000D   lt table border 1 gt  x000D     lt tr gt  x000D       lt td class  child-1  gt  x000D         lt b gt child 1 lt  b gt  x000D       lt  td gt  x000D       lt td class  child-2  gt  x000D        lt b gt child 2 lt  b gt  x000D       lt  td gt  x000D       lt td class  child-3  gt  x000D         lt b gt child 3 lt  b gt  x000D       lt  td gt  x000D     lt  tr gt  x000D   lt  table gt  x000D   x000D   x000D    This is my solution

User · Answer

You need to add this    parentDiv     position  relative      parentDiv  childDiv     position  absolute    bottom  0    left  0      When declaring absolute element  it is positioned according to its nearest parent that is not static  it must be absolute  relative or fixed

User · Answer

this works  i only tested ie  amp  ff     lt html gt   lt head gt       lt style type  text css  gt           parent               height  300px              width  300px              background-color   ccc              border  1px solid red              position  relative                     child                height  100px              width  30px              background-color   eee              border  1px solid green              position  absolute              bottom  0              left  0                 lt  style gt   lt  head gt   lt body gt       lt div id  parent  gt parent          lt div id  child  gt child lt  div gt       lt  div gt      outside  lt  body gt   lt  html gt    hope that helps

User · Answer

Use the CSS display values of table and table-cell   HTML   lt html gt   lt body gt      lt div class  valign bottom  gt       lt div gt          lt div gt my bottom aligned div 1 lt  div gt         lt div gt my bottom aligned div 2 lt  div gt         lt div gt my bottom aligned div 3 lt  div gt        lt  div gt     lt  div gt    lt  body gt   lt  html gt    CSS  html body       width  100       height  100      valign       display  table      width  100       height  100      valign  gt  div       display  table-cell      width  100       height  100      valign bottom  gt  div       vertical-align  bottom      I ve created a JSBin demo here  http   jsbin com INOnAkuF 2 edit  The demo also has an example how to vertically center align using the same technique

User · Answer

The answer posted by Y  Shoham  using absolute positioning  seems to be the simplest solution in most cases where the container is a fixed height  but if the parent DIV has to contain multiple DIVs and auto adjust it s height based on dynamic content  then there can be a problem  I needed to have two blocks of dynamic content  one aligned to the top of the container and one to the bottom and although I could get the container to adjust to the size of the top DIV  if the DIV aligned to the bottom was taller  it would not resize the container but would extend outside  The method outlined above by romiem using table style positioning  although a bit more complicated  is more robust in this respect and allowed alignment to the bottom and correct auto height of the container   CSS   container           display  table          height  auto      top       display  table-cell      width 50       height  100       bottom       display  table-cell      width 50       vertical-align  bottom      height  100       HTML   lt div id    container    gt       lt div id    top    gt Dynamic content aligned to top of  container lt  div gt       lt div id    bottom    gt Dynamic content aligned to botttom of  container lt  div gt   lt  div gt      I realise this is not a new answer but I wanted to comment on this approach as it lead me to find my solution but as a newbie I was not allowed to comment  only post

User · Answer

Seven years later searches for vertical alignment still bring up this question  so I ll post another solution we have available to us now  flexbox positioning   Just set display flex  justify-content  flex-end  flex-direction  column on the parent div  demonstrated in this fiddle as well     parentDiv     display  flex    justify-content  flex-end    flex-direction  column    width 300px    height 300px    background-color  ccc    background-repeat repeat

User · Answer

I had something similar and got it to work by effectively adding some padding-top to the child   I m sure some of the other answers here would get to the solution  but I couldn t get them to easily work after a lot of time  I instead ended up with the padding-top solution which is elegant in its simplicity  but seems kind of hackish to me  not to mention the pixel value it sets would probably depend on the parent height

User · Answer

An old post but thought i would share an answer for anyone looking  And because when you use absolute things can go wrong  What I would do is   HTML   lt div id  parentDiv  gt  lt  div gt   lt div class  childDiv  gt  lt  div gt    The Css  parentDiv     childDiv      height 40px      margin-top -20px      And that would just sit that bottom div back up into the parent div  safe for most browsers too

User · Answer

You would probably would have to set the child div to have position  absolute   Update your child style to   parentDiv  childDiv     height 100px    width 30px    background-color  999    position absolute    top 207px

User · Answer

If you are having multiple child Div s inside your parent Div  then you can use vertical-align property something like below     Parent div     vertical-align   bottom

[html] Align DIV's to bottom or baseline

Examples related to html

Examples related to css