CODEWITHSUNDEEP
htmlcssoverflow
Jazcash
Jazcash

Reputation: 3314

Positioning div outside of overflow scroll without using absolute positioning?

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.

Upvotes: 2

Views: 4358

Answers (3)

ukando
ukando

Reputation: 35

html { overflow-x: hidden; }

body { overflow-x: hidden; }

Upvotes: -1

Natalie Hedstr&#246;m
Natalie Hedstr&#246;m

Reputation: 2631

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;
}

Upvotes: 1

Martin Turjak
Martin Turjak

Reputation: 21214

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 =)

Upvotes: 3

Related Questions