Make elements move horizontally only when window shrinks

Question

I'm working on a personal website (a portfolio site, I guess), and have things looking how I want when the browser window is full-screened, but parts get cut off when the window is shrunk down (of course). I'm using Windows 7, and always dock a window on either side of my screen. It would be really great to have my website work so that certain parts are fixed in place when the browser is full-screened, but once the browser window hits a certain size, they then move in as the window shrinks. Is this possible? Does this require JavaScript (which I'm not good at at all)?

Here is a link to screen-shots of the page in question, with the third image being shopped to show what I want to happen: http://imgur.com/a/EDWjh#0

I want the side-nav (black box/text on the left) and the logo (top-right, which also links to my index page) to be fixed when the window is big, but pinch in (and be flush with the sides of the browser window) when it shrinks.

The CSS for the pieces in question are:

#blackbox{
    background-color: black;
    width: 175px;
    height: 180px;
    left: 50%;
    margin-left: 355px;
    margin-top: -20px;
    position: fixed;
    z-index:4;
}

#navleft{
    width: 175px;
    height:430px;
    background-color:black;
    position: fixed;
    margin-top: -50px;
    left: 50%;
    margin-left:-530px;
}

And the relevant HTML is just divs, with the top-right black box having a section for the logo image, which links to my index page, and the left side-nav having text links to other pages.

For what it's worth, the meat of the page is a 1060px wide container.

I hope some of you can help me with this, and I sure hope the solution isn't too tough. Thanks a lot in advance for all of your time and guidance, and I'd be more than happy to answer any questions I can. Thanks!

Answer 1

@media

As correctly pointed out by Chris, you can use media queries to do this without needing javascript. See here: jsfiddle

Note that the same applies as the jQuery example - jsfiddle moves the middle bar when resizing the page, this will not happen when using the full browser page.

The relevant css is:

@media screen and (min-width: 400px) {
    .testPos
    {
        right:auto;
        left:200px;
    }
}

jQuery

Here is a simple example with an input showing how to do it using jquery: jsfiddle

The input will be in a fixed position until the window is resized to be too small, then it will stick to the right. Note: because the jsfiddle middle bar moves according to the size, the input will also move initially, this will not happen on a normal window where the side of the browser that are not being resized are fixed (note that the distance from the bar will be constant).

There are css classes that are added and removed according to the size of the window:

.naturalPos
{
    left:200px;    
}

.stickRight
{    
    right:0px;
}

Answer 2

It does not require JavaScript on modern browsers (ones that support CSS version 3). You can use media queries to serve up different CSS depending on the width of the viewport.

Example from the linked article:

@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}

Answer 3

If you need this to work using Javascript you can use the window.resize event to wrap whatever functions you require to adjust the page:

window.onresize = function(event) {
    ...
}