Positioning div outside of overflow scroll without using absolute positioning? - html

Question

I'm making a simple blog theme and I want to have a little box displaying the post date on left off-set of each post like so: http://s21.postimg.org/fjygwqw1z/timestamp_Mockup.png
However, the post's container has an overflow-y set to scroll and attaching the timestamp div to each post won't show as it's hidden by the overflow. I can get around this if I set the timestamp div to position: absolute but then it doesn't stay in-line with the post and instead stays fixed in one place.
Here's a simple example: 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>
What I'm trying to do is make the purple box (.box) show outside its container (.content) and appear in the green area without setting it to a fixed position so it still scrolls with the content.

Answer 1

If you overlap the #leftCol with the #rightCol (by positioning them absolute to left:0; of their parent container), set the left margin to the width of the left column, then set .content position to relative and box position to absolute, and adjust the positioning using left.
Here is the updated CSS:
#leftCol{
position:absolute;
width: 100px;
height: 500px;
background: green;
left:0;
}
#rightCol{
position:absolute;
padding-left:100px;
width: 400px;
height: 500px;
overflow-y: scroll;
left:0;
}
.content{
height: 700px;
width: 100%;
background: red;
position:relative;
}
.box{
width: 100px;
height: 100px;
background: purple;
position:absolute;
left:-100px;
}
and a DEMO
Hope this helps =)

Answer 2

You could just create another div around the actual content and then float it next to the box.
Like this http://jsfiddle.net/MeVwt/3/
Downside with this is that you have to specify the width of the content for it to fill out all the width.
<div id="rightCol">
<div class="content">
<div class="box"></div>
<div class="content_text">
Fish
</div>
</div>
</div>
Css:
.content_text{
height: 700px;
background: red;
width: 335px;
float:left;
}
.box{
width: 100px;
height: 100px;
background: purple;
margin-left: -50px;
float:left;
}

Answer 3

html {
overflow-x: hidden; }
body {
overflow-x: hidden; }