HTML/CSS/jQuery: How to set an "absolute text bottom" so that further text expands upwards?

Question

This is kind of hard to explain, so I'll do my best:

I want to have text content clamped to the bottom of a div - so that no matter how long the content is, it is always set to the bottom.

So if I had:

HEADER
content 1
content 2

Content 2 would be lined up about 20px from the bottom of the parent div and if I had:

HEADER
content 1

Content 1 would be lined up about 20px from the bottom of the parent div, even though there is less content.

Can this be done dynamically without tables?

Answer 1

<div>
  <div id="header" style="position: absolute; top: 0px; left:0px; right: 0px; height:105px;">
  </div>
  <div id="content" style="position: absolute; top: 105px; left:0px; right: 0px; bottom: 20px; height:105px;"> 
  </div>
  <div id="footer" style="position: absolute; bottom: 0px; left: 0px; right: 0px; height: 20px;">
  </div>
</div>

Hope this gives you an idea...

Answer 2

Yes, just wrap header and content in a single div like this:

<div id="parent">
  <div class="to_bottom">
    <h1>Header</h1>
    <p>Content 1</p>
    <p>Content 2</p>
  </div>
</div>

Then use this CSS:

#parent { position: relative }
.to_bottom { 
    position: absolute;
    left: 0;
    bottom: 20px;
    width: 100%;
} 

More info: Absolute positioning can be relative to any side: top, left, bottom, right. Or a combination.

So: bottom: 0; right: 0 anchors to the right and bottom, but not the top or left. It basically becomes: bottom: 0; right: 0; top: auto; left: auto.

Similarly, using bottom: 20px; left: 0 anchors it to the bottom left, 20px up from the bottom.

Answer 3

I seem to have run into a similar issue needing to align something to the bottom of the div irrespective of the height of the content above it. Doing some searching I can across the jQuery UI position plugin and am just starting to take a look at it now... maybe of some help to you as well.