How to float div to the side and have it sticky while scrolling

Question

So I have some divs that are hidden but are shown when you click the span with the id that corresponds with the div class. I have that park working and it will show the divs but I have a long list of things that goes off page. I want the hidden divs to be sticky to the top of the screen so that if a user clicks a link far down they don't have to scroll all the way to the top in order to see it. Here is some code that should give you an idea of what I'm working with.

HTML:

<div id='container'>
    <div id='nav'>
        Nav things
    </div
    <div id='main'>
        <span class='clickme' id='1'>Thing 1</span>
        <span class='click me' id='2'>Thing 2</span>
        Etc..
    </div>
    <div class="div_class 1'>
        Explanation of Thing 1.
    </div>
    <div class='div_class 2'>
        Explanation of Thing 2.
    </div>
</div

CSS:

#container
{
    margin: 0px auto;
    width: 90%;
}
#nav
{
    float: left;
    width: 15%;
}
#main
{
    float: left;
    width: 15%;
}
.div_class
{
    float: right;
    display: none;
}

I have tried 'posistion: fixed' on the div_class class but that puts the text into the top left overlapping the nav div. I then tried adding padding but that made the div overlap some of the links and made them un-clickable.

Answer 1

You are on the right track with position: fixed. You just need to tell the element where to go:

#floater {
    position: fixed;
    top: 0;
    right: 0;
}

Adjust top and right (or left and bottom if you wish) as needed to avoid overlapping your navigation div.

See this JSFiddle for a bare-bones demonstration, and this one with a navigation bar.