Align DIV to bottom of the page

Question

I have a DIV that needs to be aligned to the bottom of a search result page, problem is whenever there is no search result or less rows of search result displayed on the page, the DIV goes up from the bottom of the page.

but it should be placed like this

and whenever there are more rows and the page can be scrolled down, the DIV should be place like this.

My currrent code looks like this

        <div id="bottom-stuff>              <div id="bottom">                              // DIV stuff             </div>          </div>   #bottom-stuff {     padding: 0px 30px 30px 30px;     margin-left:150px;     position: relative; }  #bottom{      position: absolute; bottom: 0px;  } 

Answer 1

Right I think I know what you mean so lets see....

HTML:

<div id="con">    <div id="content">Results will go here</div>    <div id="footer">Footer will always be at the bottom</div> </div> 

CSS:

html, body {    margin:0;    padding:0;    height:100%; } div {     outline: 1px solid; } #con {    min-height:100%;    position:relative; } #content {    height: 1000px; /* Changed this height */    padding-bottom:60px; } #footer {    position:absolute;    bottom:0;    width:100%;    height:60px; } 

This demo have the height of contentheight: 1000px; so you can see what it would look like scrolling down the bottom.

DEMO HERE

This demo has the height of content height: 100px; so you can see what it would look like with no scrolling.

DEMO HERE

So this will move the footer below the div content but if content is not bigger then the screen (no scrolling) the footer will sit at the bottom of the screen. Think this is what you want. Have a look and a play with it.

Updated fiddles so its easier to see with backgrounds.

Answer 2

Try position:fixed; bottom:0;. This will make your div to stay fixed at the bottom.

WORKING DEMO

The HTML:

<div id="bottom-stuff">   <div id="search"> MY DIV </div> </div> <div id="bottom"> MY DIV </div> 

The CSS:

#bottom-stuff {      position: relative; }  #bottom{      position: fixed;      background:gray;      width:100%;     bottom:0; }  #search{height:5000px; overflow-y:scroll;} 

Hope this helps.