#contents {
width: 1100px;
margin-left: auto;
margin-right: auto;
}
#sidebar {
padding: 10px;
position: sticky;
top: 20px;
left: 10px;
width: 150px;
border-right: 1px solid black;
float: left;
}
#main {
padding: 15px;
margin-left: 330px;
margin-bottom: 10px background-color:green;
width: 800px;
}
#footer {
background-color: gray;
clear: left;
}<!doctype html>
<html>...
<body>
<div id="contents">
<div id="sidebar">
random contents
</div>
<div id="main">
</div>
<div id="footer">
</div>
</div>
</body>
</html>Footer is being overlapped by sidebar content when the page is scrolled all the way down.
How can this issue be resolved?