Is there a way to place content in bottom of a div using only one div?

Question

My css is this:

.stage{
    width:960px;
    background-image:url('stage.png');
    background-position:bottom;
    background-repeat:repeat-x;
    min-height:400px;
    float:left;
    text-align:center;
}

This places the background image of the bottom of the div, and the content is centered. But I cant figure out how to place the content in the bottom of the div.

The width is fixed, the height should expand if the content is higher than the div, but if the content is shorter, it should be placed in the bottom.

I have seen a few examples with at least 3 different divs to accomplish this, but is there a way of doing this with only one div in css? I don't want to place a div in the bottom of another div, all content inside the div should be in align to the bottom.

I wish it could be as simple as text-align:bottom;

Answer 1

If you don't mind absolute/relative positioning use

.myContainer {
   position:relative; /* Needed so the inner divs position themselves relative to the container*/
}

.myInnerDiv {
    position:absolute;
    bottom:0px;
    text-align:center; /* To get the text to the center */
}

Then your html can be

<div class="myContainer">
    <div class="myInnerDiv">Content goes here</div>
</div>

Answer 2

You can do it with 1 div like this - your container div should be

position: relative;

and then style a paragraph (or an inner div) with

position: absolute;
bottom: 0px;

Answer 3

One way to achieve this would be to put the content in another div and position it absolutely within the .stage div.

.stage{position:relative;}

.stage .content{
 position:absolute;
 bottom:0;
 text-align:center;
}

Answer 4

vertical-align:bottom is the answer.

Answer 5

Edit 2: You can do like this.

<div style="border: 1px solid yellow; width: 70%; height: 100%; position: relative; overflow:hidden">
    Outer
    <a style="border: 1px solid green; width: 100%; position: relative; float: left; margin-top: 5%;" href="#">      
        Comments are disabled for this post


    </a>
</div>

You can change any tag with <a>

See live demo here : http://jsbin.com/ajofu

Answer 6

This is kind of hackish, but it appears to work in Firefox, IE and Chrome (I don't have the other browsers to test it)

CSS

.myContainer {
 width:960px;
 background: #555 url('stage.png') bottom repeat-x;
 min-height:400px;
 float:left;
 text-align:center;
}

.myContainer img.spacer {
 height: 400px;
 width: 0;
 vertical-align: bottom;
 border: transparent 0px;
 text-align: left;
}

HTML

<div class="myContainer">
 <img alt="" class="spacer" /><br>
 blah blah blah blah blah blah blah blah blah blah blah blah
</div>