css - Have a fixed DIV element with re-sizing constraints

Question

I have a website with the following basic layout. Essentially, I have the NAV div and SIDEBAR div at fixed positions. This is because when a user scrolls down on my page, only the MIDDLE COLUMN div will move.

The problem I have is that when the window gets shrunk horizontally, the SIDEBAR moves to left and eventually overlaps my MIDDLE COLUMN.

I have the body set to a min-width but it only affects the SIDEBAR if it is position:absolute and not position:fixed

Is there a way to keep my same method of scrolling, but have the SIDEBAR div stop moving left after a certain pixel constraint?

Thanks!

EDIT MARKUP:

div.MASTER {
    position: inherit;
    width:100%;
    height:auto;
}

div.NAV {
    position:fixed;
    top:0;
    left:0;
    width:200px;
}

div.CONTENT {
    float: left;
    position: relative;
    width:100%;
}

div.MIDDLECOLUMN {
    float:left;
    width:100%;
    height:100%;
    text-align:center;
}

div.SIDEBAR {
    position:fixed;
    top: 0;
    right: 0;
    width:200px;
}

Answer 1

Ah I see the issue. You need to assign a min width on the main container. Set the min-width to the width of the element right before it breaks.

Add a margin-left equal to the width of the nav bar to the content div.

Answer 2

You can use the scroll function in jquery:

$(document).ready(function()
{
var $left= $('#yourdiv').offset().left + 20; //+20 is optional

$(window).scroll(function()
{   
 if ($(window).scrollLeft()>$left)   
        {
         $('#yourdiv').addClass('floater');
         $('#yourdiv').removeClass('floated')
        }
        else
        {
         $('#yourdiv').removeClass('floater');
         $('#yourdiv').addClass('floated')

         }
});
});

where floater class is with posit absolute and floated is with position fixed.

EDIT 1:

Maybe you can use all percentage width even in the NAV bar like:

.nav{width:20%; position:fixed;} 

.master{width:60%; position:absolute;margin-left:21%; }