Well, I want to make a side div stick while the content scrolls.
This is my simplified HTML:
<header>
foo
</header>
<div id="main">
<div id="allContent">fubar</div>
<div id="ads">anúncio</div>
</div>
This is my CSS:
header {
background-color: #1e1e1e;
width: 100%;
height: 80px;
font-family: geomanist;
position: fixed;
z-index: 1;
}
#main {
width: 90%;
overflow: auto;
margin: auto;
padding: 10px;
top: 80px;
position: relative;
z-index: 0;
}
#allContent {
display: inline-block;
width: 70%;
text-align: left;
}
#ads {
display: inline-block;
vertical-align: top;
width: 25%;
height: 100vh;
}
And the header is only there to know where I got the code from the main.
The div with id main groups the div with the id allContent that has the content while the div with the id ads is fixed. But this CSS was as close as I could get. Can someone help me?