Fix Div to Bottom Without Using CSS Position

Position div to bottom of a different div, without using Absolute

Without using position: absolute, you'd have to vertically align it.

You can use vertical-align: bottom which, according to the docs:

The vertical-align CSS property specifies the vertical alignment of an inline or table-cell box.

So, either set the outer div as an inline element, or as a table-cell:

#outer {  height: 200px;  width: 200px;  border: 1px solid red;  display: table-cell;  vertical-align: bottom;}
#inner {  border: 1px solid green;  height: 50px;}

<div id="outer">  <div id="inner">  </div></div>

CSS positioning at the bottom without absolute positioning

Updated: JSFiddle with flexbox applied to your code.

https://jsfiddle.net/ec7qxtfr/1/

flexbox can help you achieve this. Add the following to your parent container.

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

The next bit is for the 10px padding you wanted. This will target the first child element inside the container.

.child:first-child {
  padding-bottom: 10px;
}

As long as the first child div is present, even if you don't have any content (no paragraphs), the second div will still be pushed to the bottom of the container thanks to flexbox. Likewise, you can comment out the height property to verify that the padding is present between the two child elements.

Check out the JSFiddle below. You can adjust the height in the parent container to confirm that the second div stays at the bottom of the container.

https://jsfiddle.net/o3r40keu/5/

Note: this solution will assume you will only have two child elements inside this particular parent container.

I hope this helps!

How to align div to bottom right without using absolute position?

With Flexbox you can align both at the bottom and keep the inner div right aligned.

Add display: flex; align-items: flex-end to the outer div, reset the margin on the h1 (or you can add one to the other inner div) and then set margin-left: auto; to the inner div

The align-items: flex-end will keep the inner div bottom aligned with the h1 and the margin-left: auto; will push the inner div to the right.

Note, because of the different font size, their inner metrics will create a somewhat bigger white space below the h1. Here I simply added a 4px bottom padding on the inner div, but you can also play with the overall line-height

---

Updated based on a comment

If to keep the text unwrapped until they hit their parents width, add flex-wrap: wrap; to outer div

<div style="border-bottom: 1px solid; padding-bottom:10px; display: flex; flex-wrap: wrap; align-items: flex-end;">
    <h1 style="margin: 0;">      This is my title    </h1>        <div style="            margin-left: auto;            font-size: small;            padding: 0 0 4px 20px;            font-style: italic;">     Published on Friday 11th August 2017 at 12:46      </div>  </div>
<br><div style="border-bottom: 1px solid; padding-bottom:10px; display: flex; flex-wrap: wrap; align-items: flex-end;">
    <h1 style="margin: 0;">      This is my big title - Bla bla bla       </h1>        <div style="            margin-left: auto;            font-size: small;            padding: 0 0 4px 20px;            font-style: italic;">     Published on Friday 11th August 2017 at 12:46      </div>  </div>
<br><div style="border-bottom: 1px solid; padding-bottom:10px; display: flex; flex-wrap: wrap; align-items: flex-end;">
    <h1 style="margin: 0;">      This is my big title - Bla bla bla bla bla bla bla bla bla    </h1>        <div style="            margin-left: auto;            font-size: small;            padding: 0 0 4px 20px;            font-style: italic;">     Published on Friday 11th August 2017 at 12:46      </div>  </div>

How can I position my div at the bottom of its container?

The flexbox approach!

In supported browsers, you can use the following:

Example Here

.parent {
  display: flex;
  flex-direction: column;
}
.child {
  margin-top: auto;
}

.parent {  height: 100px;  border: 5px solid #000;  display: flex;  flex-direction: column;}.child {  height: 40px;  width: 100%;  background: #f00;  margin-top: auto;}

<div class="parent">  <div class="child">Align to the bottom</div></div>

How to position a div to the bottom of the container, without using absolute positioning?

Don't abandon position: absolute. Simply add padding to the bottom of the container equal to the height of the footer div.

#outer{
    position: relative;
    padding-bottom: 55px;
}

#foot{
    position: absolute;
    height: 55px;
    width: 100%;
    bottom: 0;
    left: 0;
}

Without padding: http://jsfiddle.net/cG5EH/2

With padding: http://jsfiddle.net/cG5EH/1

Make div stay at bottom of page's content all the time even when there are scrollbars

This is precisely what position: fixed was designed for:

#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}

Here's the fiddle: http://jsfiddle.net/uw8f9/

Fix div to bottom without using css position

iOS has issues with fixed positioning. When swiping to scroll, it will not update the fixed position until the tap/drag is released.

While position: fixed; technically works, mobile Safari does not redraw the fixed element while the scroll is happening in order to properly calculate the over-scroll animation (dragging and releasing causes the page to keep scrolling based on the speed of the swipe), so it won't update until the animation has stopped.

You could, theoretically, use JavaScript to manually update the element's position a bunch of times while dragging occurs, but that will override the default, natural behavior of mobile Safari.

More reading material and examples, if you're interested: http://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios

---

Related Topics