How to position element on the bottom of its container?

Question

major edits, please re-open

Creating a page with Bootstrap 2.3.2 that will later become a template for Joomla 3.x.
In the header, I have 6 elements. I was able to position them as shown below.

problem

is positioning the nav-pills section quite at the bottom of the container that has image as background-image.

• setting margin-top on the .minimenu container of the nav-pills does work, but relates it to the top. I'd like to relate it to the bottom.
• vertical-align: bottom; has been tried with no solution.

HTML code:

<div class="container">
    <p class="headtitle">This is the Headline on Top!</p>
    <div class="header">
        <img src="http://www.chris-nlp-hall.com/tmp/logo1.png" class="pull-left logo1" />
        <img src="http://www.chris-nlp-hall.com/tmp/logo2.png" class="pull-right logo2" />
        <div class="mininav">
            <ul class="nav nav-pills">
                <li><a href="#">Link1</a></li>
                <li><a href="#">Link2</a></li>
                <li><a href="#">Link3</a></li>
            </ul>
        </div>
    </div>
    <div class="navbar">
        <div class="navbar-inner">
            <ul class="nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">Learn</a></li>
                <li><a href="#">More</a></li>
            </ul>
        </div>
    </div>
</div>

CSS:

p.headtitle {
  text-align: center;
  font-size: 1.4rem;
}
.header {
    background-image: url(http://www.chris-nlp-hall.com/tmp/center.png);
    background-position: center top;
    background-repeat: no-repeat;
    height: 160px;
}
.mininav {
    text-align: center;
    vertical-align: bottom; /* doesn't work */
}
.mininav .nav-pills {
    display: inline-block;
}
.header .logo1 {
    margin-left: 10px;
}
.header .logo2 {
    margin-right: 10px;
}

see this updated fiddle: https://jsfiddle.net/michi001/srzwz8o4/

Answer 1

.header {
  position: relative;
  background-image: url(http://www.chris-nlp-hall.com/tmp/center.png);
  background-position: center top;
  background-repeat: no-repeat;
  height: 160px;
}

.mininav {
  text-align: center;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
}

Added relative postion in .header and modified .mininav class

I have fixed your issue JS Fiddle