How to Stack Divs from Top to Bottom in CSS

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%;
}

How to stack divs from top to bottom in CSS

@ funky; you can use css3 column-count property for this

css:

div#multicolumn1 {
        -moz-column-count: 2;
        -moz-column-gap: 50%;
        -webkit-column-count: 2;
        -webkit-column-gap: 50%;
        column-count: 3;
        column-gap: 50%;

}

check this link for a demo Div's in two columns

http://jsfiddle.net/sandeep/pMbtk/

note: it doesn't work in IE.

Stacking DIVs on top of each other?

Position the outer div however you want, then position the inner divs using absolute. They'll all stack up.

.inner {  position: absolute;}

<div class="outer">   <div class="inner">1</div>   <div class="inner">2</div>   <div class="inner">3</div>   <div class="inner">4</div></div>

Stacking Multiple Divs From Bottom to Top

Since the container (.lowerNav) has a fixed height and you know the size of its content this is quite easy to do with absolute positioning.

HTML:

<div class="outer">
  Hello up here!

  <ul class="inner">
    <li><a href="#">Hello</a></li>
    <li><a href="#">down</a></li>
    <li><a href="#">there!</a></li>
  </ul>
</div>

CSS:

.outer {
  position: relative;
  height: 200px;
}

.inner {
  position: absolute;
  bottom: 0;
}

Check this CodePen for a live example of this code: http://codepen.io/EvilOatmeal/pen/fCzIv

How to make a div placed from bottom to top

You can try to use flexbox.

  .message {
    width: 100vmin;
    height: 100vmin;
    overflow: hidden;
    background: green;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    align-items: center;
  }

  .message__block {
    color: white;
    width: 100%;
    height: 9vmin;
    background: black;
    margin-bottom: 1.1vmin;
    text-align: center;
  }

<body>
  <div class="message">
    <div class="message__block">4</div>
    <div class="message__block">3</div>
    <div class="message__block">2</div>
    <div class="message__block">1</div>
  </div>
</body>

Stacking divs on top of each other

z-index works for positioned absolute or relative elements, it's simple just add position relative and z-index for h1 tag,

h1 { font-size: 50px; border-bottom: 15px solid #e8cd54; position:relative; z-index:1 }

Updated jsfiddle

Stacking divs from the bottom right

I think you can pull off that layout with some flexbox magic:

set your .swatches container, in your case .colorSwatches, with display: flex prop
then to this container and a flex-wrap rule of: flex-wrap: wrap-reverse, so that the children inside it will wrap, on to the next line, in opposite direction of the flex-direction, which by default is row I think.
and lastly, add to the container, the justify-content: flex-end; so that the items inside will start laying out at the end of their container.

Here's a jsfiddle demo and a couple of resources:

Flexbox
Justify-content
Flex-wrap