How to Make Elements Flow from Bottom to Top

How to make elements flow from bottom to top?

Think outside the box:

.container, .tile {
    transform:rotate(180deg);         /* Moz and IE10+ */
    -ms-transform:rotate(180deg);     /* IE9 */
    -webkit-transform:rotate(180deg); /* Opera/Chrome/Safari */
}

Yes, this really works:

.container {  margin:10px;  border:1px solid black;  float:left;  transform:rotate(180deg);}.tile {  width:100px;  height:64px;  border:1px solid black;  margin:5px;  float:right;  font-size: 40px;  text-align: center;  line-height: 64px;  vertical-align: middle;   transform:rotate(180deg);}

<div id="container-1" class="container">  <span class="tile">1</span>  <span class="tile">2</span>  <span class="tile">3</span>  <span class="tile">4</span>  <span class="tile">5</span>  <span class="tile">6</span>  <span class="tile">7</span>  <span class="tile">8</span>  <span class="tile">9</span></div>

Stacking Divs from Bottom to Top

All the answers miss the scrollbar point of your question. And it's a tough one. If you only need this to work for modern browsers and IE 8+ you can use table positioning, vertical-align:bottom and max-height. See MDN for specific browser compatibility.

Demo (vertical-align)

.wrapper {
  display: table-cell;
  vertical-align: bottom;
  height: 200px;
}
.content {
  max-height: 200px;
  overflow: auto;
}

html

<div class="wrapper">
  <div class="content">
     <div>row 1</div>
     <div>row 2</div>
     <div>row 3</div>  
  </div>
</div>  

---

Other than that, I think it's not possible with CSS only. You can make elements stick to the bottom of their container with position:absolute, but it'll take them out of the flow. As a result they won't stretch and make the container to be scrollable.

Demo (position-absolute)

.wrapper {
  position: relative;
  height: 200px;
}
.content {
  position: absolute;
  bottom: 0;
  width: 100%;
}

arrange element bottom to top using CSS

 div { 
   display: flex; 
   flex-flow:wrap;
 }
 img{
  order: 3;
  flex-basis: 100%;
 }
 a {
   order: 2;
   flex-basis: 100%;
 }
 p {
   order:1 ;
   flex-basis: 100%;
 }

How to move div from bottom to top

If you know the height of your sub-menu, then you can do it using position: relative on #container and position: absolute on both your #content and #sub-menu. You'll also have to give the #container a top value that's equal to the height of your #sub-menu.

Filling a CSS Grid from bottom up instead of top down

Use flexbox:

.grid {
  display: flex;
  flex-flow: wrap-reverse; /* this will do the magic */
  width: 300px;
  border: 1px solid black;
  box-sizing:border-box;
}

.gridItem {
  width:calc(100%/3);
  height: 100px;
  box-sizing:border-box;
  border: 1px solid orange;
}

<div class="grid">
  <div class="gridItem">1</div>
  <div class="gridItem">2</div>
  <div class="gridItem">3</div>
  <div class="gridItem">4</div>
  <div class="gridItem">5</div>
  <div class="gridItem">6</div>
  <div class="gridItem">7</div>
</div>

Flexbox columns, wrap order bottom to top

This can be done indeed be done with flexbox. We use the flex-direction property, to reverse the order with flex-direction: column-reverse and we wrap the boxes with flex-wrap: wrap; - This can also be done by combining the two in flex-flow - I've out-commented that in the pen below. What you need to take note of, is that by using columnising your boxes, you will need to add a specific height to the container. If you don't they will just keep going downwards, and not wrapping.

Here's a pen illustrating your exact need.

And the code used:

HTML - Notice the order.

<div class="container">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
</div>

CSS

.container {
    display: flex;
    flex-direction: column-reverse; /* Where ordering reverses */
    flex-wrap: wrap; /* Wrapping boxes */
    /* flex-flow: column-reverse wrap; */
    height: 300px;
    width: 100px;
}
.box { /* All properties here are for illustrative purposes */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px;
    width: 50px;
    height: 50px;

    background-color: red;
}

Remember your vendor-prefixes.

Set writing mode / text direction bottom to top

Does CSS provide a way to align/orient elements from the bottom?

Surprisingly, in horizontal writing mode, it doesn't appear so.

There are various properties, including writing-mode, direction, text-orientation and flex-direction, that allow you to re-arrange the flow of content.

But none of them appear to allow the laying out of content in a horizontal writing mode starting from the bottom right. Maybe somebody could correct me on this.

In the meanwhile, here's a hack (pure CSS):

.cnt {  display: flex;  flex-direction: row-reverse;  flex-wrap: wrap;  align-items: flex-start;  align-content: flex-start;  justify-content: center;  text-align: center;  width: 200px;  height: 300px;  border: 1px solid green;  transform: scaleY(-1);}.itm {  padding: 10px;  width: 20px;  margin: 10px;  background: green;  color: white;  transform: translate(0px, 0px) scaleY(-1) scaleX(1);  transition: transform 0.5s;}.itm:hover {  transform: translate(0px, -3px) scaleY(-1.1) scaleX(1.1);}

<div class="cnt">  <div class="itm">8</div>  <div class="itm">7</div>  <div class="itm">6</div>  <div class="itm">5</div>  <div class="itm">4</div>  <div class="itm">3</div>  <div class="itm">2</div>  <div class="itm">1</div></div>

Aligning a box, at the bottom instead of the top

Page elements flow from top to bottom, left to right.

To manipulate this, you essentially need to take the elements out of the normal flow, and position: absolute is one of the easier ways to do this.

For example:

#holder {position: absolute; bottom: 0;}

The only thing extra you'd need with this approach is an outer holder to reserve the page space.

http://jsfiddle.net/79L7Lud7/4/

---

Related Topics