In HTML how do I keep text at the bottom of my div (as a footer) and keep this text from floating on the screen past 500px

Example

I want to keep text at the bottom of the screen, floating at the bottom right corner (when resizing) until the screen is 500px then stop

CSS

div.content{

    min-height:550px;
}
div.footer{

    height:20px; 
    color: #999999;
    font-size: 0.9em;
    text-align: right;
    bottom:0;
    right:0;
    position:absolute;
    padding-right: 10px;
    padding-bottom: 10px;
}

HTML

<div class=content></div>
<div class=footer>version2</di开发者_开发技巧v>

This doesn't work. The footer text will follow the screen the entire way on resizing. Any suggestions?

---

First, since the footer is not a child of content, it will "never" be positioned relative to it.

Second, if you need something to switch behaviour (from always at bottom to not-always), you'd need to do this with javascript. I'll try and think of a solution.

---

You don't specify absolute on your content container, so the absolute is relative to the window. Then you need to put footer inside content. Or use a container for both.

http://jsfiddle.net/mrtsherman/u86uf/

div.content{
    min-height:550px;
    position: relative;
}

<div class="content">content
    <div class="footer">footer</div>
</div>

Or

http://jsfiddle.net/mrtsherman/u86uf/1/

div.wrapper { position: relative; }
div.content{
    min-height:550px;
}

<div class="wrapper">
  <div class="content">content</div>
  <div class="footer">footer</div>
</div>