CSS - Scroll content under fixed positioned element?

Question

HTML:

<div id="container">
    <ul>
        <li><a href="#first">first</a></li>
        <li><a href="#second">second</a></li>
        <li><a href="#third">third</a></li>
    </ul>
    <div id="somecontainer">
        <div id="first">
        </div>
        <div id="second">
        </div>
        <div id="third">
        </div>
    </div>
</div>

DEMO: http://jsfiddle.net/JRnDz/

PROBLEM: When you click on link named "second", the page should jump to the div with id "second". However, it will not display entire div, but just some part of it (150px-50px=100px). The top of the div gets cut off.

QUESTION: How can I display the entire div after clicking the "second" link?

WHAT I HAVE TRIED: Adding relative positioning and top: 50px to the container:

#container {
  position: relative;
  top: 50px;
}

Answer 1

The solution written by @ipsnow72 is the more clear.

If you prefer, you can use jquery's plugin ScrollTo and use the offset parameter. http://demos.flesler.com/jquery/scrollTo/

$(...).scrollTo( '#yourelement', {offset:-50} );

Answer 2

It depends what is the use of this code, but if you add

#someconteiner div{
    padding-top:50px;
    margin-bottom:-50px;
    position:relative;
    display:block;
}

and play a bit with z-indexes it works: http://jsfiddle.net/JRnDz/2/