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

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>

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.

Align div from bottom to top

You could use display: inline-block instead of float which will allow you to use vertical-align: bottom.

Like this:

.chart div {
  font: 10px sans-serif;
  background-color: steelblue;
  text-align: right;
  padding: 3px;
  margin: 1px;
  color: white;
  display: inline-block;
  vertical-align: bottom;
}

Fiddle

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 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

Stack elements at the bottom (instead of the top) of the container

Try CSS flexbox:

ul {  display: flex;           /* establish flex container */  flex-direction: column;  /* align children vertically */  border: 1px solid red;  height: 250px;}
li:first-child {  margin-top: auto;        /* shift top li, and all li's beneath, to the bottom */  }

<ul>  <li>a</li>  <li>b</li>  <li>c</li></ul>

how to overlap a top div and a bottom div into an image without generating ugly/messy white spaces?

Wrap your image and overlapping divs in a div. Inside that, position your overlap div elements absolute.

As a sidenote, don't use id for styling purposes. Also note that any id in your page can only live on a single element; id must be unique per-document.

Instead of creating meaningless markup for the gradients, you can use the pseudo elements ::before and ::after here.

* {
  padding: 0;
  margin: 0;
}

.image-container {
  padding: 50px 0;
  position: relative;
}

.image {
  max-width: 100%;
}

.image-container::before,
.image-container::after {
  content: '';
  height: 100px;
  position: absolute;
  width: 100%;
}

.image-container::before {
  background-image: linear-gradient(45deg, rgba(0, 194, 228, 0.75), rgba(214, 0, 203, 0.479));
  top: 0;
}

.image-container::after {
  background-image: linear-gradient(45deg, rgba(214, 0, 203, 0.479), rgba(0, 194, 228, 0.75));
  bottom: 0;
}

<h1>Start</h1>
<div class="image-container">
  <img class="image" src="https://placekitten.com/g/1920/1080">
</div>
<h1>End</h1>

Stacking Divs from Bottom to Top