Develop Reference

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

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

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/

For whole container or body tag apply this css
position: absolute;
top:0;
left:0;

Can't smooth scroll while centering a div vertically

I have a div that I have centered both vertically and horizontally:
#mydiv {
width:960px;
height:400px;
position:fixed;
margin-left:-480px;
margin-top:-200px;
top:50%;
left:50%;
}
When I am using the Smoothscroll.js library it won't work. If I remove the "position:fixed/position:absolute" it do, but then my div is no longer centered. Is it any whay I can achieve both smooth scroll and centering?

I found a solution to this problem by myself. I made a fake (invisible) div at the top of the screen that changes height after screen-size. Then I put my visible (#mydiv) under that without any css positioning.
#mydivfake {
width:1000px;
height: calc(50vh - 310px); /*310px is half of the height of my visible centered div*/
margin-left:-500px;
left:50%;
}

How to force jQuery dropdowns to full width?

I've created a jQuery dropdown menu that shows DIVs on hover, but I cannot force the dropdown DIVs to have a 100% width across the page.
CSS:
ul.oe_menu div{
position:absolute;
top:103px;
left:1px;
background:#fff;
width:200; /* This sets the width of the dropdown DIV */
height:210px;
padding:30px;
display:none;
}
Take a look at the JS Fiddle to view the full code & expand the preview section to see the problem.
Thanks!

That is because if you set the div's width 100%, it is taking the 100% of its parent's width (the corresponding li).
One solution for this is to set the div's position fixed so that it takes the width of the page when its width is set 100%.
ul.oe_menu div{
position:fixed;
top:103px;
left:0px;
background:#fff;
width:100%;
height:210px;
display:none;
}
This way you will have to remove the left:n from the divs. JS Fiddle here.
To make the transition look more natural, you can consider doing .slideUp(200) [JS Fiddle here] or .animate({"opacity":0},{complete:function(){$(this).css("opacity","1")}}); [JS Fiddle here] asmouseleave.
Hope this helps.

You can try setting the div width to the width of the window; (given that you're hiding overflow-x on the body anyway).
var winWidth = $(window).width();
$this.children('div').css({zIndex:'9999',width:winWidth}).stop(true,true)....
Have a look here to see;
http://jsfiddle.net/cs3p5/

Scroll to bottom not working

Need help, why is my scrolltop not working on this sample
I dont know why..using the code everything works fine. But updating the css the scrolltop is not working.:( what should i do to fixed this? is the problem cause by my css style?
i used this but it won't scroll at the bottom of the div..
$(document).ready(function() {
alert('scroll must happen');
$('#message_container').scrollTop($('#message_container')[0].scrollHeight);
$('.topbox').html('just sample');
});

There is no visible scrolling happening because the element you're trying to scroll isn't overflowing; it's all displayed. The scrollbar is for the <body> element and not the <div> you're trying to scroll.
You can make it work if you give #message_container a height e.g.
#message_container {height:100px;}
Alternatively, use absolute positioning tricks, for example in this demo. (The initial "undoes" CSS, I used it to keep code short. See MDN)
#container, #head, #body, #foot{
position: absolute;
top:0;left:0;right:0;bottom:0;
}
#head {
bottom: initial;
height:50px;
}
/* position so it get's your desired size*/
#body {
top:50px;
bottom:50px;
overflow-y: scroll;
}
#foot {
top: initial;
height:50px;
}

You have to set 2 things:
Overflow for the div,
Some height, even percentage one (to make it more flexible).
If you don't set any height at all the div will expand and then there is nothing to scroll, in this case the only scroll bar you get is of the document itself (body).
I added a height and overflow property to your CSS and now it works as expected.
jsFiddle
CSS added:
#message_container {
overflow-y:auto;
overflow-x:hidden;
height:300px;
}

Jquery drop down menu, how to position within my container div

I've got a fixed position menu at the top of my page, inside it is a div with the menu items and a .container class in order to center and limit the width. I can't seem to figure out how to limit my drop down menu to stay with in the .container class width limits. It keeps going off towards the right and will be cut off depending on page widths. Any help is really appreciated.
http://jsfiddle.net/rKaPN/47/

http://jsfiddle.net/rKaPN/51/
Changed:
//fixed so submenu will be relative to menuitem
.menu ul li{
padding:0;
float:left;
position:relative;
}
//if a rightmenu, float right instead of left
li.menu-right.drop-down ul{
display:block !important;
position:absolute;
right:0;
}

You'll probably need to make sure that your .container is using a percentage based width.
Your menu is floating to the right of the container... so if the container is set to 500px, but your browser is 400px, your menu is going to get cut off.