Align Div's to Bottom or Baseline

How to align content of a div to the bottom

Relative+absolute positioning is your best bet:

#header {
  position: relative;
  min-height: 150px;
}

#header-content {
  position: absolute;
  bottom: 0;
  left: 0;
}

#header, #header * {
  background: rgba(40, 40, 100, 0.25);
}

<div id="header">
  <h1>Title</h1>
  <div id="header-content">And in the last place, where this might not be the case, they would be of long standing, would have taken deep root, and would not easily be extirpated. The scheme of revising the constitution, in order to correct recent breaches of it, as well as for other purposes, has been actually tried in one of the States.</div>
</div>

Align text baseline to bottom of div

Add a ::before pseudo element with 100% height and display: inline-block; and use it to vertically align the <span> to the baseline:

div {  height: 80px;  width: 300px;  background: #ff5;  position: relative;}
div::before {  display: inline-block;  height: 100%;  content: '';}
span {  font-size: 30px;  vertical-align: baseline;}

<div>  <span>TEST gjp ABC</span></div>

Aligning div to baseline of the first line of another div?

You can do it quite simply with a wrapping div and a bit of flex box.

.wrapper {  display: flex;  align-items: baseline;}
.note {  margin-right: 1ch;}
.embedded {    width: 40px;    height: 40px;    display: inline-block;    vertical-align: -15px;    border: 1px solid black;}

<div class="wrapper">  <div class="note" style='display:inline-block;'>NOTE:</div>  <div style='display:inline-block; width:200px;'>      Here's <div class='embedded'></div> an embedded div and more text  </div>  </div>

Align the bottom of a child element with the parent's baseline

Finally, I found a solution:) It was hidden somewhere in the CSS specification:

The baseline of an 'inline-block' is the baseline of its last line box
in the normal flow, unless it has either no in-flow line boxes or if
its 'overflow' property has a computed value other than 'visible', in
which case the baseline is the bottom margin edge.

This is taken from https://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align, bottom of the page.

So, in order to move its baseline to the bottom margin edge, you only have to add display: inline-block and overflow: hidden (or anything other than 'visible', eg: 'auto') to the child element:

body {    font-size: 200%;}
.bottom {    display: inline-block; /* <--- this */    overflow: hidden; /* <--- and this */
    width: 10rem;    border: 2px solid orange;    padding: 2rem;}

<div>    <span>text jklmnopqr</span>    <div class="bottom">div with bottom on the baseline</div></div>

How to vertically align floating divs to the bottom?

This will do the trick:

#bars {
    display: table-cell;
    border: solid 1px black;
}
#bars > div {
    display: inline-block;
    vertical-align: bottom;
    width: 5px;
    background-color: #999;
    margin-left: 2px;
}
#bars > div:first-child {
    margin-left: 0;
}

It uses display: table-cell; on the parent div, which by default has vertical-align: baseline; applied. This changes the need for float: left; on the child divs and allows us to use display: inline-block;. This also removes the need for your CSS clear fix.

EDIT - Per @thirtydot's comments, adding vertical-align: bottom; to the child divs removes the gap at the bottom.

Therefore, I changed CSS above and jsFiddle. I kept the display: table-cell; so that the parent div wraps the child divs with 0 padding and looks nice and snazzy!

Vertical align a child div to the bottom of a parent div, and set the child as a percentage of the parent's height

Use positioning (relative on the parent, absolute on the child) instead of the display property:

#outerdiv {
    height: 100%;
    width: 100%;
    position:relative;
}
#innerdiv {
    width: 100%;
    height: 20%;
    background-color: red;
    position:absolute;
    bottom:0;
}

jsFiddle example

Align an element to bottom with flexbox

You can use auto margins

Prior to alignment via justify-content and align-self,
any positive free space is distributed to auto margins in that
dimension.

So you can use one of these (or both):

p { margin-bottom: auto; } /* Push following elements to the bottom */
a { margin-top: auto; } /* Push it and following elements to the bottom */

.content {  height: 200px;  border: 1px solid;  display: flex;  flex-direction: column;}h1, h2 {  margin: 0;}a {  margin-top: auto;}

<div class="content">  <h1>heading 1</h1>  <h2>heading 2</h2>  <p>Some text more or less</p>  <a href="/" class="button">Click me</a></div>

---

Related Topics