align divs to the bottom of their container

Question

I figured this would be simple  I need to align both of the inside divs  green and blue  to the bottom of their container  red   I m hoping to not use absolute positioning and i need it to be ie6 7 8 ff chrome safari etc compatible    lt div style  border 1px solid red   gt       lt div style  border 1px solid green  width 20px  height 20px  float left   gt  lt  div gt       lt div style  border 1px solid blue  width 20px  height 30px  float left   gt  lt  div gt       lt div style  clear both   gt  lt  div gt   lt  div gt    i ve tried using vertical-align but can t find a simple solution   thanks for the help  p   EDIT here s my attempt at abs pos solution    lt div style  border 1px solid red  position relative   gt       lt div style  border 1px solid green  width 20px  height 20px  float left  position absolute  bottom 0px   gt  lt  div gt       lt div style  border 1px solid blue  width 20px  height 30px  float left  position absolute  bottom 0px   gt  lt  div gt       lt div style  clear both   gt  lt  div gt   lt  div gt

User · Accepted Answer

Why can t you use absolute positioning   Vertical-align does not work  except for tables    Make your container s position  relative   Then absolutely position the internal divs using bottom  0   Should work like a charm   EDIT By zoidberg  i will update the answer instead    lt div style  position relative  border  1px solid red width  40px  height  40px   gt      lt div style  border 1px solid green position  absolute  bottom  0  left  0  width  20px  height  20px   gt  lt  div gt      lt div style  border 1px solid blue position  absolute  bottom  0  left  20px  width  20px height  20px   gt  lt  div gt   lt  div gt

User · Answer

The way I solved this was using flexbox  By using flexbox to layout the contents of your container div  you can have flexbox automatically distribute free space to an item above the one you want to have  stick to the bottom    For example  say this is your container div with some other block elements inside it  and that the blue box  third one down  is a paragraph and the purple box  last one  is the one you want to have  stick to the bottom       By setting this layout up with flexbox  you can set flex-grow  1  on just the paragraph  blue box  and  if it is the only thing with flex-grow  1   it will be allocated ALL of the remaining space  pushing the element s  after it to the bottom of the container like this       apologies for the terrible  quick-and-dirty graphics

User · Answer

I don t like absolute positioning  either  because there is almost always some collateral damage  i e  unintended side effects  Especially when you are working with a responsive design   There seems to be an alternative - the sandbag technique  By inserting a  helper  element  either in the markup of via CSS  we can push elements down to the bottom of the container  See http   community sitepoint com t css-floating-divs-to-the-bottom-inside-a-div 20932 for examples

User · Answer

The modern way to do this is with flexbox  adding align-items  flex-end  on the container   With this content    lt div class  Container  gt     lt div gt one lt  div gt     lt div gt two lt  div gt   lt  div gt    Use this style    Container     display  flex    align-items  flex-end      https   codepen io rds pen gGMBbg

User · Answer

You can cheat  Say your div is 20px high  place the div at the top of the next container and set   position  absolute  top  -20px    It may not be semantically clean but does scale with responsive designs

[css] align divs to the bottom of their container

Examples related to css