I am currently designing a blog theme and I would like to include a small box that displays the post date offset to the left of each post, similar to this mockup:
My issue arises because the post container has overflow scrolling enabled, making it difficult for the timestamp div to display correctly next to each post as it gets hidden by the overflow. While setting the timestamp div to position: absolute does solve this problem, it causes the timestamp box to become fixed in one position instead of staying inline with the associated post.
You can view a simple example here: http://jsfiddle.net/MeVwt/
<style>
#leftCol{
width: 100px;
height: 500px;
background: green;
float: left;
}
#rightCol{
width: 400px;
height: 500px;
background: orange;
overflow-y: scroll;
float: left;
}
.content{
height: 700px;
width: 100%;
background: red;
}
.box{
width: 100px;
height: 100px;
background: purple;
margin-left: -50px;
}
</style>
<div id="leftCol">
</div>
<div id="rightCol">
<div class="content">
<div class="box"></div>
Fish
</div>
</div>
My goal is to have the purple box (.box) displayed outside its container (.content) and visible in the green area without fixing its position so that it still scrolls along with the content.