How to get the browser border to lock to a div when resizing?

Question

I'm looking at this 3 fixed-column CSS layout on http://www.vanseodesign.com. I want to use this layout however I'd like to change the way it behaves when I resize the browser.

When the browser is open nice and wide the columns are centered nicely on the page:

Then we reduce the width of the browser and it locks to the left side of the left-most column like this:

What I'd like to do is change the CSS (or javascript if necessary) so that the browser locks to the left side of the middle column instead when the browser becomes too narrow:

I'm not sure how to achieve this though?? Can anyone suggest how to change the code and most importantly why your solution works?

EDIT:

For those reading this question: I marked Salem Ouerdani's answer as the correct one because he was the first to answer with a solution that worked the particular way I wanted. However, it became clear that people were interpreting the question in slightly different ways. So it is worth reading through because there are some really great answers which might suit your situation better. Please upvote them as such.

Answer 1

Try to modify your container div from this :

#container { width: 960px; margin: 20px auto;}

to this :

#container {
  width: 960px;
  margin: 20px auto;
  position: absolute;
  left: 50%;
  margin-left: -480px; /* half the fixed width */
}

---

EDIT : Also you need to add this in order to lock to the left side of the center div whenever your browser size is beyond the fixed 960px :

@media (max-width: 960px) {
    #container {
        left: 0;
        margin-left: -240px; /* Primary Sidebar width */
    }
}

---

UPDATE : As @media (max-width: 480px){} did better solve the issue rather than 960px then I'm adding the related code pen example with the final solution :

>> Codepen sample code

Answer 2

Revised Solution (based on OP comment)

Solution by @spenibus is the best and I recommend that. The solution does not work with browsers <= IE9 (IE9 only partially supports it). If you wish to make it cross browser compatible, then I suggest using javascript to manually set the scroll.

Fiddle: http://jsfiddle.net/dp7gwcn5/4/

$(function () {
    $(window).resize(function () {
        var width = $(window).width();
        if (width <= 960) {
            if(width <= 480) $(document).scrollLeft($('#content').offset().left);
            else $(document).scrollLeft((960-width) / 2);
        }
    });
});

Old Solution

Solution #1 (Scroll: Do not hide anything, just cling)

If you wish to keep the sidebar still accessible by scrolling but only make the browser's left edge stick to the left edge of your main content #content. Then manipulate the scroll

Fiddle: http://jsfiddle.net/dp7gwcn5/. The fiddle will let you change the size of your preview window, as soon as you shrink it enough to hide the secondary sidebar the window clings to the left edge of #content

$(function(){
    $(window).resize(function(){
        if ($(window).width() < 720) {
            $(document).scrollLeft($('#content').offset().left);
        }
    });
});

Note: The width 720 was given based on the widths you have set on your sidebars and conents, you can modify it to be calculated on the fly if you wish.

Solution #2 (Static: Hide primary sidebar)

If you wish to hide the primary sidebar then simply use a media query to hide the primary sidebar when your window size is small

Fiddle:http://jsfiddle.net/dp7gwcn5/1/

@media all and (max-width:720px) {
    #primary {
        display:none;
    }

    #container {
        width:720px;
    }
}

Solution #3 (Dynamic: Hide primary sidebar)

Solution #2 is static and there is not much you can do about it, however, if you wish to compute the widths on the fly and hide the side bar, use a script

Fiddle: http://jsfiddle.net/dp7gwcn5/2/

Script

$(function(){
    $(window).resize(function(){
        if ($(window).width() < 720) $('#container').addClass('small');
        else $('#container').removeClass('small');
    });
});

CSS

#container.small {
    width:720px;
}

#container.small #primary {
    display:none;
}

My Suggestion

My suggestion is to use Solution #1 if you do not wish to make it mobile compatible. If you wish to make it mobile compatible I suggest using Solution #2 with a menu button to show your primary sidebar.

Note: Solution #1 and Solution #3 will work on most browsers. Solution #2 will not work on browsers < IE9

Answer 3

From what I can see, this template uses the margin 0 auto in the container. The way the margin is set up, it centres the "container" which contains all three columns. This means that the content is currently centred by treating each of the three columns as one big one.

This layout is also not responsive. This means that it does not adapt to larger or smaller browser sizes. It has a fixed width and height.

A simple solution is to change the pixel units to %. This will create a fluid layout that will adapt more easily to the browser size as the measurements are based on a portion of the window size instead of having a fixed size.

For example:

body {

width: 50%; } 

No matter what size the browser window is, the body will only account for half the size.

If you are looking to have all three columns visible in the exact same layout or just visible in the browser without scrolling to the side no matter what device or screen size, then you need to use media queries. Media queries are css properties that let you set specific css styles for specific resolutions or screen sizes.

For example:

@media screen and (max-width: 300px) {
    body {
        background-color: lightblue;
    }
}

@media screen and (max-width: 600px) {
    body {
        background-color: purple;
    }
}

In my example (although very rough), the background of the body will be purple up to a small size of 600px. It will then change to blue until a size of 300px.

You can read more about media queries here: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Answer 4

Update 2015-08-03 01:59 +0000

Reading your comment on another answer about staying centered until the left edge of the centered column meets the browser edge made things much clearer.

This will keep the middle column centered until the browser is as large as the column, then it will stick to the left edge of the column.

html, body {
    margin:0;
    padding:0;
}

@media (max-width: 480px) {
    #container {
        margin-left:-240px;
    }
}

@media (max-width: 960px) and (min-width:481px) {
    #container {
        margin-left:calc( (960px - 100%) / -2 );
    }
}

Original anwser

Pure css. The values of "960" and "720" should be adjusted to account for body margin. Works under Firefox, no guarantees elsewhere. Using calc() for adaptive negative margin based on browser width.

/* fixed negative margin below 720px width */
@media (max-width: 720px) {
    #container {
        margin-left:-240px;
    }
}

/* adaptive negative margin vetween 720px and 960px width */
@media (max-width: 960px) and (min-width:721px) {
    #container {
        margin-left:calc( (960px - 100%) * -1 );
    }
}

Preview