This snippet shows the CSS styles being used:
<style type="text/css">
#search_results{position:relative;height:369px;overflow:auto}
#floating{background-color:#eee;padding:15px;position:absolute;bottom:0px}
</style>
I am facing an issue with positioning the floating div at the bottom of the search results div. When I apply the above CSS to the floating div, it sticks to the bottom as expected and works fine when scrolling the window. However, the problem arises when scrolling inside the search_results div as the position of the floating div changes. I need the floating div to stay fixed at the bottom of the search results div regardless of whether the page or the search results div is scrolled. I tried a script which seems to work well in all browsers except IE, where there are some jerks. How can I fix this so that the div stays at the bottom at all times?
<div style="width:695px;border:1px solid red" id="search_results">
<div id="floating">test block</div>
<div style="padding:25px 0;border-bottom:1px solid green">
<div style="float:left">
<p>test1</p>
<p class="mrgBtm5px">random no</p>
<p>
<span>lorem ipsum</span><br/>
<span>lorem ipsum expand</span>
</p>
</div>
<div style="clear:both"></div>
</div>
<div style="padding:25px 0;border-bottom:1px solid green">
<div style="float:left">
<p>test1</p>
<p class="mrgBtm5px">random no</p>
<p>
<span>lorem ipsum</span><br/>
<span>lorem ipsum expand</span>
</p>
</div>
<div style="clear:both"></div>
</div>
<div style="padding:25px 0;border-bottom:1px solid green">
<div style="float:left">
<p>test1</p>
<p class="mrgBtm5px">random no</p>
<p>
<span>lorem ipsum</span><br/>
<span>lorem ipsum expand</span>
</p>
</div>
<div style="clear:both"></div>
</div>
</div>