Question

HTML:

<div id="content">
content ,content,content ,content...
<input type="button" value="see more">
</div>

css

#content
{
        width:500px;
    height:400px;/* actual height 1000px */
    float:left;
    color:grey;
    text-align:justify;
    text-indent:1em;
    border:1px solid black;
    padding:10px;
        overflow:hidden;
}

Clicking on button using jquery the div will expand up to 1000px. But my problem is, by setting overflow:hidden, the button is not visible.
I want the button to show at the end of div. Before clicking and after clicking, I want to show the button at the end of div. How to do this?

Answer 1

#content{
    position: relative; 
}
input[type='button']{
    position: absolute;
    bottom: 0;
}

Absolutely positioned elements are positioned relative to the nearest “other-than-static” positioned parent element. That’s why we need to set the #content to relative first.

DEMO: http://jsfiddle.net/RFFwy/