How to align content of a div to the bottom

Question

Say I have the following CSS and HTML code    x000D   x000D   header   x000D    height  150px  x000D    x000D   lt div id  header  gt  x000D     lt h1 gt Header title lt  h1 gt  x000D    Header content  one or multiple lines  x000D   lt  div gt  x000D   x000D   x000D    The header section is fixed height  but the header content may change   I would like the content of the header to be vertically aligned to the bottom of the header section  so the last line of text  sticks  to the bottom of the header section   So if there is only one line of text  it would be like    -----------------------------   Header title         header content  resulting in one line  -----------------------------   And if there were three lines    -----------------------------   Header title     header content  which is so   much stuff that it perfectly   spans over three lines  -----------------------------   How can this be done in CSS

User · Answer

Here is another solution using flexbox but without using flex-end for bottom alignment. The idea is to set margin-bottom on h1 to auto to push the remaining content to the bottom:

_x000D_

#header {_x000D_
  height: 350px;_x000D_
  display:flex;_x000D_
  flex-direction:column;_x000D_
  border:1px solid;_x000D_
}_x000D_
_x000D_
#header h1 {_x000D_
 margin-bottom:auto;_x000D_
}

_x000D_

<div id="header">_x000D_
  <h1>Header title</h1>_x000D_
  Header content (one or multiple lines) Header content (one or multiple lines)Header content (one or multiple lines) Header content (one or multiple lines)_x000D_
</div>

_x000D_

We can also do the same with margin-top:auto on the text but in this case we need to wrap it inside a div or span:

_x000D_

#header {_x000D_
  height: 350px;_x000D_
  display:flex;_x000D_
  flex-direction:column;_x000D_
  border:1px solid;_x000D_
}_x000D_
_x000D_
#header span {_x000D_
 margin-top:auto;_x000D_
}

_x000D_

<div id="header">_x000D_
  <h1>Header title</h1>_x000D_
  <span>Header content (one or multiple lines)</span>_x000D_
</div>

_x000D_

User · Answer

display   flex  align-items   flex-end

User · Answer

I have devised a way which is a lot simpler than what s  been mentioned   Set the height of the header div  Then inside that  style your H1 tag as follows   float  left  padding  90px 10px 11px   I m working on a site for a client  and the design requires the text to be at the bottom of a certain div  I ve achieved the result using these two lines  and it works fine  Also  if the text does expand  the padding will still remain the same

User · Answer

I use these properties and it works    header     display  table-cell    vertical-align  bottom

User · Answer

After struggling with this same issue for some time  I finally figured out a solution that meets all of my requirements    Does not require that I know the container s height  Unlike relative absolute solutions  the content doesn t float in its own layer  i e   it embeds normally in the container div   Works across browsers  IE8    Simple to implement    The solution just takes one  lt div gt   which I call the  aligner    CSS   bottom aligner       display  inline-block      height  100       vertical-align  bottom      width  0px      html   lt div class  bottom aligner  gt  lt  div gt      Your content here       This trick works by creating a tall  skinny div  which pushes the text baseline to the bottom of the container   Here is a complete example that achieves what the OP was asking for   I ve made the  bottom aligner  thick and red for demonstration purposes only   CSS    outer-container     border  2px solid black    height  175px    width  300px      top-section     background  lightgreen    height  50       bottom-section     background  lightblue    height  50     margin  8px      bottom-aligner     display  inline-block    height  100     vertical-align  bottom    width  3px    background  red      bottom-content     display  inline-block      top-content     padding  8px      HTML    lt body gt     lt div class  outer-container  gt       lt div class  top-section  gt        This text        lt br gt  is on top       lt  div gt       lt div class  bottom-section  gt         lt div class  bottom-aligner  gt  lt  div gt         lt div class  bottom-content  gt          I like it here          lt br gt  at the bottom         lt  div gt       lt  div gt     lt  div gt   lt  body gt

User · Answer

Inline or inline-block elements can be aligned to the bottom of block level elements if the line-height of the parent block element is greater than that of the inline element    markup    lt h1 class  alignBtm  gt  lt span gt I m at the bottom lt  span gt  lt  h1 gt    css   h1 alignBtm     line-height  3em    h1 alignBtm span     line-height  1 2em    vertical-align  bottom       make sure you re in standards mode

User · Answer

I found this solution bassed on a default bootstrap start template     HTML      lt div class  content wrapper  gt     lt div class  content floating  gt       lt h2 gt HIS This is the header lt br gt        In Two Rows lt  h2 gt       lt p gt This is a description at the bottom too lt  p gt      lt  div gt   lt  div gt      css      content wrapper        display  table        width  100         height  100      For at least Firefox          min-height  100           content floating    display  table-cell    vertical-align  bottom    padding-bottom 80px

User · Answer

A perfect cross-browser example is probably this one here   http   www csszengarden com  cssfile  213 213 css amp page 0  The idea is both to display the div at the bottom and also making it stick there  Often the simple approach will make the sticky div scroll up with the main content   Following is a fully working minimal example  Note that there s no div embedding trickery required  The many BRs are just to force a scrollbar to appear    lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Strict  EN       http   www w3 org TR xhtml1 DTD xhtml1-strict dtd  gt   lt html gt   lt head gt       lt style gt                          margin  0              padding  0                      floater               background  yellow              height  200px              width  100               position  fixed              bottom  0px              z-index  5              border-top  2px solid gold                  lt  style gt   lt  head gt     lt body gt       lt br  gt  lt br  gt  lt br  gt  lt br  gt  lt br  gt  lt br  gt  lt br  gt  lt br  gt  lt br  gt  lt br  gt  lt br  gt  lt br  gt       lt br  gt  lt br  gt  lt br  gt  lt br  gt  lt br  gt  lt br  gt  lt br  gt  lt br  gt  lt br  gt  lt br  gt  lt br  gt  lt br  gt       lt br  gt  lt br  gt  lt br  gt  lt br  gt  lt br  gt  lt br  gt  lt br  gt  lt br  gt  lt br  gt  lt br  gt  lt br  gt  lt br  gt       lt br  gt  lt br  gt  lt br  gt  lt br  gt  lt br  gt  lt br  gt  lt br  gt  lt br  gt  lt br  gt  lt br  gt  lt br  gt  lt br  gt         lt div id  floater  gt  lt  div gt   lt  body gt   lt  html gt    If you are wondering your code might not be working on IE  remember to add the DOCTYPE tag at the top  It s crucial for this to work on IE  Also  this should be the first tag and nothing should appear above it

User · Answer

You can use following approach   x000D   x000D   header-parent     height  150px    display  grid      header-content     align-self  end    x000D   lt div class  header-parent  gt     lt h1 gt Header title lt  h1 gt     lt div class  header-content  gt      Header content    lt  div gt   lt  div gt  x000D   x000D   x000D

User · Answer

If you have multiple  dynamic height items  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

If you re not worried about legacy browsers use a flexbox   The parent element needs its display type set to flex  div parent     display  flex    height  100       Then you set the child element s align-self to flex-end   span child     display  inline-block    align-self  flex-end      Here s the resource I used to learn  http   css-tricks com snippets css a-guide-to-flexbox

User · Answer

You don t need absolute relative for this  It is very much possible using relative position for both container and data  This is how you do it   Assume height of your data is going to be x  Your container is relative and footer is also relative  All you have to do is add to your data  bottom  -webkit-calc -100    x     Your data will always be at the bottom of your container  Works even if you have container with dynamic height   HTML will be like this   lt div class  container  gt     lt div class  data  gt  lt  div gt   lt  div gt    CSS will be like this   container    height 400px    width 600px    border 1px solid red    margin-top 50px    margin-left 50px    display block     data    width 100     height 40px    position relative     float left    border 1px solid blue    bottom  -webkit-calc -100    40px      bottom calc -100    40px       Live example here  Hope this helps

User · Answer

You can simply achieved flex   x000D   x000D  header   x000D    border  1px solid blue  x000D    height  150px  x000D    display  flex                       defines flexbox    x000D    flex-direction  column              top to bottom    x000D    justify-content  space-between      first item at start  last at end    x000D    x000D  h1   x000D    margin  0  x000D    x000D   lt header gt  x000D     lt h1 gt Header title lt  h1 gt  x000D    Some text aligns to the bottom x000D   lt  header gt  x000D   x000D   x000D

User · Answer

try with   div myclass   margin-top  100       try changing the   to fix it  Example  120  or 90     etc

User · Answer

Relative absolute positioning is your best bet    x000D   x000D   header   x000D    position  relative  x000D    min-height  150px  x000D    x000D   x000D   header-content   x000D    position  absolute  x000D    bottom  0  x000D    left  0  x000D    x000D   x000D   header   header     x000D    background  rgba 40  40  100  0 25   x000D    x000D   lt div id  header  gt  x000D     lt h1 gt Title lt  h1 gt  x000D     lt div id  header-content  gt Some content lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    But you may run into issues with that   When I tried it I had problems with dropdown menus appearing below the content   It s just not pretty   Honestly  for vertical centering issues and  well  any vertical alignment issues with the items aren t fixed height  it s easier just to use tables   Example  Can you do this HTML layout without using tables

User · Answer

The site I just did for a client requested that the footer text was a high box  with the text at the bottom I achieved this with simple padding  should work for all browsers    lt div id  footer  gt    some text here  lt  div gt       footer     padding  0 30px    padding-top  60px    padding-bottom  8px

User · Answer

The modern way to do it would be using flexbox  See the example below  You don t even need to wrap Some text    into any HTML tag  since text directly contained in a flex container is wrapped in an anonymous flex item    x000D   x000D  header   x000D    border  1px solid blue  x000D    height  150px  x000D    display  flex                       defines flexbox    x000D    flex-direction  column              top to bottom    x000D    justify-content  space-between      first item at start  last at end    x000D    x000D  h1   x000D    margin  0  x000D    x000D   lt header gt  x000D     lt h1 gt Header title lt  h1 gt  x000D    Some text aligns to the bottom x000D   lt  header gt  x000D   x000D   x000D    If there is only some text and you want to align vertically to the bottom of the container    x000D   x000D  section   x000D    border  1px solid blue  x000D    height  150px  x000D    display  flex                       defines flexbox    x000D    align-items  flex-end               bottom of the box    x000D    x000D   lt section gt Some text aligns to the bottom lt  section gt  x000D   x000D   x000D

User · Answer

2015 solution   lt div style  width 200px  height 60px  border 1px solid red   gt        lt table width 100  height 100  cellspacing 0 cellpadding 0 border 0 gt           lt tr gt  lt td valign bottom gt   This text at bottom  lt  td gt  lt  tr gt       lt  table gt    lt  div gt    http   codepen io anon pen qERMdx  your welcome

User · Answer

Seems to be working    content          or just insert a number with  px  if you re fighting CSS without lesscss org           vertical-align  - header height    content height          only need it if your content is  lt div gt          if it is inline  e g    lt a gt   will work without it        display  inline-block      Using less makes solving CSS puzzles much more like coding than like    I just love CSS  It s a real pleasure when you can change the whole layout  without breaking it    just by changing one parameter

User · Answer

Seems to be working   HTML      I m at the bottom  css   h1 alignBtm     line-height  3em    h1 alignBtm span     line-height  1 2em    vertical-align  bottom

User · Answer

Use CSS positioning      Creates a new stacking context on the header     header     position  relative        Positions header-content at the bottom of header s context     header-content     position  absolute    bottom  0      As cletus noted  you need identify the header-content to make this work    lt span id  header-content  gt some header content lt  span gt    lt div style  height 100   position relative   gt       lt div style  height 10   position absolute  bottom 0px   gt bottom lt  div gt   lt  div gt

User · Answer

header       height  150px      display flex      flex-direction column      top      flex  1         lt div id  header  gt       lt h1 class  top  gt Header title lt  h1 gt      Header content  one or multiple lines   lt  div gt     x000D   x000D   header   x000D      height  250px  x000D      display flex  x000D      flex-direction column  x000D      background-color yellow  x000D    x000D   x000D   top  x000D      flex  1  x000D    x000D   lt div id  header  gt  x000D       lt h1 class  top  gt Header title lt  h1 gt  x000D      Header content  one or multiple lines  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Here s the flexy way to do it  Of course  it s not supported by IE8  as the user needed 7 years ago  Depending on what you need to support  some of these can be done away with   Still  it would be nice if there was a way to do this without an outer container  just have the text align itself within it s own self    header       -webkit-box-align  end      -webkit-align-items  flex-end      -ms-flex-align  end      align-items  flex-end      display  -webkit-box      display  -webkit-flex      display  -ms-flexbox      display  flex      height  150px

User · Answer

a very simple  one-line solution  is to add line-heigth to the div  having in mind that all the div s text will go bottom   CSS    layer width 198px         height 48px         line-height 72px         border 1px  000 solid   layer a text-decoration none     HTML    lt div id  layer  gt       lt a href     gt text at div s bottom  lt  a gt   lt  div gt    keep in mind that this is a practical and fast solution when you just want text inside div to go down  if you need to combine images and stuff  you will have to code a bit more complex and responsive CSS

User · Answer

All these answers and none worked for me    I m no flexbox expert  but this was reasonably easy to figure out  it is simple and easy to understand and use  To separate something from the rest of the content  insert an empty div and let it grow to fill the space   https   jsfiddle net 8sfeLmgd 1    myContainer     display  flex    height  250px    flex-flow  column      filler     flex  1 1        lt div class  myContainer  gt     lt div gt Top lt  div gt     lt div class  filler  gt  lt  div gt     lt div gt Bottom lt  div gt   lt  div gt    This reacts as expected when the bottom content is not fixed sized also when the container is not fixed sized

User · Answer

if you could set the height of the wrapping div of the content   header-content as shown in other s reply   instead of the entire  header  maybe you can also try this approach   HTML   lt div id  header  gt       lt h1 gt some title lt  h1 gt       lt div id  header-content  gt           lt span gt              first line of header text lt br gt              second line of header text lt br gt              third  last line of header text          lt  span gt       lt  div gt   lt  div gt    CSS   header-content      height 100px      header-content  before    display inline-block    content       height 100     vertical-align bottom      header-content span      display inline-block      show on codepen

[html] How to align content of a div to the bottom

Examples related to html

Examples related to css

Examples related to vertical-alignment