How can I position divs at the bottom of container div and inline?

Question

I have two divs within a container div that I want at the bottom of the container and in the left/right corners. When I position the container relative and the inside divs absolute bottom: 0 the text within those divs disappear. Below is where I am at so far and the inside divs are placed left and right using float but in the center vertically instead of at the bottom.

CSS

    .container {
    margin-right: auto;
    margin-left: auto;
    width: 90%;
    position: relative;
}

#top {
    background-image: url(../header.jpg);
    -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
    background-repeat: no-repeat;    
  background-position: center; 
  min-height: 480px;
}

.title {  
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    font-size: 84px;
  line-height: 92px;
  float: left;
}

p span {
    display: block;
    font-weight: 400;
}

.author {
    display: inline-block;
    float: right;
    bottom: 0;
}

li {
    list-style: none;
}

HTML

    <div class="container">

        <div class="title">

            <p>Howdy <span>Partner</span></p>

        </div>

        <div class="author">

            <ul>

                <li><img src="../portrait.png"></li>

                <li></li>

            </ul>

        </div>

    </div>

</section> <!-- Endof Header -->

Broda Noel · Accepted Answer · 2022-05-10 04:50:13Z

4

You should have:

.container {
    position: relative;
    height: 100px; /* This is neccesary! */
}

.title {
    position: absolute;
    bottom: 0;
    left: 0;
}

.author {
    position: absolute;
    bottom: 0;
    right: 0;
}

And remember to define the width of .title and .author or set any content into they in order to be able to see the divs.

Check: http://jsfiddle.net/hvfku99c/

edited May 10, 2022 at 4:50

answered Nov 19, 2014 at 2:14

Broda Noel

2,1131 gold badge27 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user3443619 Over a year ago

I did that first but then the text/imgs in the title and author divs are not visible

Broda Noel Over a year ago

Sorry, my error. I was: "position", not "display". Check it: jsfiddle.net/hvfku99c

Collectives™ on Stack Overflow

How can I position divs at the bottom of container div and inline?

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related