CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-2
michi
michi

Reputation: 6625

How to position element on the bottom of its container?

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.

draft of header

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/

Upvotes: 0

Views: 701

Answers (4)

Sayed Rafeeq
Sayed Rafeeq

Reputation: 1219

.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

Upvotes: 0

Micha&#235;l Th&#246;nnissen
Micha&#235;l Th&#246;nnissen

Reputation: 139

.mininav {
right: 0;
left: 0;
bottom: 0;
min-height: 30px; /*or other value*/
max-height: 30px; /*or other value*/ 
position: absolute;
}

.mininav p {
line-height: 30px;
}

Upvotes: 0

xpy
xpy

Reputation: 5641

Then why don't you just position absolute to the bottom?

.mininav{
  position: absolute;
  bottom: 0px;
  width: 100%;
}

you will also need to set .header as relative:

.header { position:relative; }

Upvotes: 1

Ezequiel Tojo
Ezequiel Tojo

Reputation: 21

In bootstrap you can use pull-left and pull-right classes for the logos and navpills can be centered using text-center class in a parent div. Best option for the background seem to be place it via CSS using background-image.

Upvotes: 2

Related Questions