ScrollTo content not centered

Question

I'm using a jQuery ScrollTo plugin to scroll a page to a particular <div> or ID on the same page.

I currently have #p1 as my main content, and #p2 located offscreen to the right.

When I click on the link for #p2, my page scrolls left just fine; but my #p2 content is placed at the edge of the screen on the right.

I want to know how I can center mye #p2 content regardless of screen resolution and distance from #p1

HTML

<div class="container">
    <div class="col col-25">
        <a href="#p2">Typefaces</a>
    </div>

    <div class="offscreen">
        <div class="etc">
            <p id="p2">Some paragraph text</p>
        </div>
    </div>
</div>

CSS

.container {
    max-width: 1600px;
    padding-left: 1em;
    padding-right: 1em;
    margin-left: auto;
    margin-right: auto
}

.offscreen {
    position: absolute;
    right: -1200px;
}

.etc {
    width: 1250px;
    margin: 0 auto;
    padding: 0 5%;
    padding-top: 100px;
    overflow: hidden;
}

.etc p {
    max-width: 450px;
}

Any help would be appreciated. Thanks!

Answer 1

Try this: http://jsfiddle.net/s3R6U/1/

Making #p1 and #p2 both 50% width, float left. And your container div 200% width.

HTML

<div id="container">
    <div id="p1"><a href="#p2">Typefaces</a></div>
    <div id="p2">This is a test</div>
</div>

CSS

#container {
    width: 200%;
}

#p1, #p2 {
    width: 50%;
    float: left;
}

#p1 {
    text-align: left;
}

#p2 {
    text-align: center;
}

Answer 2

I've done some changes kindly check whether they're correct or not

HTML

<div class="container" style="border:1px solid black">
<a href="#p2">Typefaces</a>
<div class="offscreen" style="border:1px solid black">
<div class="etc" style="border:1px solid black">
<p id="p2">Some paragraph text</p>
</div>
</div>
</div>

CSS

.container {

    max-width: 2600px;
    padding-left: 1em;
    padding-right: 0em;
    margin-left: auto;
    margin-right: auto
}

.offscreen {
    position: absolute;
    right: -750px;
    left: 100px
}

.etc {
    width: 100px;
    margin: 0 auto;
    padding: 0 5%;
    padding-top: 100px;
    overflow: hidden;
}

.etc p {
    max-width: 100px;
}

Here I've added html with borders which will help you know a little bit more about location of text. Once you're done please remove those style attributes from <div>. In.offscreen if you'll do position to center then text will come to center or changing right and left of.offscreen can give you a better output.

I've verified in google chrome using jsfiddle. Kindly verify and let me know..