Top-left pixel outside 100% width of the browser window

Question

Is it possible to load my webpage so that top-left pixel isn't the first one but rather somewhere else?

This is my current webpage layout and I'd like my webpage to be loaded so that top-left pixel is right where red arrow lands

Answer 1

I think I understand your request: it sounds like your goal is to have a single-column page and then exclusively in the about section with the right/left blocks you'd like to be able to scroll left/right.

If that's correct, I would restructure your page to have just the middle column, and then use css positioning on your #about section like this:

#about {position: relative;}
#left {position:absolute; left:-100%; width:100%; min-height:100%;}
#right {position:absolute; left:100%; width:100%; min-height:100%;}

You might need to do something with your body overflow, too:

body {overflow-x:hidden;}

Then to actually create the functionality you want, you could use javascript/jQuery to animate the sections left/right when you click on the anchors in the #about section.

Or you could use this js plugin, which works extremely well and is designed for just this type of layout: http://alvarotrigo.com/fullPage/

Answer 2

For whole container or body tag apply this css

position: absolute;
top:0;
left:0;