I have searched for a solution to this issue on SO, but none of the suggestions were effective in all browsers. Therefore, I am now turning to jQuery to help me achieve the desired result.
My goal is to position the div at the bottom of the HTML page, rather than at the bottom of the screen.
So far, I have experimented with CSS only
clear: both;
min-height: 6%;
position: fixed;
bottom: 0;
Edit
Here's my current CSS:
html, body {
margin: 0px;
padding: 0px;
height: 100%;
}
#footer {
width: 100%;
height: 6%;
position: absolute;
bottom:0px;
left:0px;
}
#content {
float: left;
width: 59.5%;
height: 83%;
position:relative;
}
#news {
z-index:2;
}
<html>
<div id="content">
<div id="news"> </div>
</div>
<div id="footer"></div>
<html>