How to make content next to a fixed-position menu not overlap in smaller resolutions


Tags: javascript,jquery,html,css,web

Problem :

I'm trying to figure out how to make it so if a user has a browser window that's under about 1024px (the site has no horizontal-scroll at 1024px+), if they do scroll right to see more of the main content, that it does not get overlapped/messy'd by the left fixed-position menu.

I've made a JS fiddle that recreates the basic problem I am facing: http://jsfiddle.net/YE7ZZ/1/

CSS

#wrap {
    width:100%;
    background-image:url('../images/Imagine/bg_image44.png');
    background-attachment:fixed;
} 

#top {

}

#left {
    position:fixed;
    border:1px solid red;
    background:pink;
    width:250px;
}
#positioner {
    margin-left:250px;
    width:auto;
}
#content {
    border:1px solid green;
    width:700px;
    margin:auto;
        background:grey;

}

HTML

    <div id="wrap">
    <div id="top"></div>
    <div id="left">menu item~~~~~<br /><br /><br />menu item~~~~~<br /><br /><br />menu item~~~~~<br /><br /><br />menu item~~~~~<br /><br /><br />menu item~~~~~<br /><br /><br />menu item~~~~~<br /><br /><br /></div>
    <div id="positioner">
        <div id="content">asdf content that should be lower-resolution browser friendly and not be overlapped by the menu<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

            asdf content that should be lower-resolution browser friendly and not be overlapped by the menu<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
            asdf content that should be lower-resolution browser friendly and not be overlapped by the menu<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
            asdf content that should be lower-resolution browser friendly and not be overlapped by the menu<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        </div>
    </div>
</div>

I have attempted to solve this issue about three separate times over the course of the past six weeks and have not been able to find a fix, so any help would be appreciated so much.

Thank you for your time.

edit-- my ideal solution would be that a horizontal scroll-bar appears for the content portion, so that they can scroll through the content itself, without having to: 1) overlap the left menu; or 2) cut off the amount of content viewable; or 3) reduce the size of the left menu

SOLVED: thank you so much to @Gaby aka G. Petrioli

I used this javascript solution:

$(document).ready(function(){
var lastLeft = -1,
    menu = $('.left_, .top_');

$(window).on('scroll resize', function(){
    var left = $(window).scrollLeft();
    if (left >= 0 && left!==lastLeft){
        lastLeft = left;
        menu.css('left',-left+'px');
    }
});

});

And changed the CSS as he outlined, and on my live version, had to change the positioning from some top menu elements from fixed to absolute. Thank you so much everyone!



Solution :

Not sure of your specific needs but you could remove the width:700px from the .content rule and so that element will shrink as the viewport does..

Demo at http://jsfiddle.net/YE7ZZ/2/


If on the other hand you need to maintain the layout, and you want the fixed to apply only for vertical scrolling, you will have to use some jquery (not possible with pure CSS)

var lastLeft = -1,
    menu = $('#left');
$(window).on('scroll resize', function(){
    var left = $(window).scrollLeft();
    if (left >= 0 && left!==lastLeft){
        lastLeft = left;
        menu.css('left',-left+'px');
    }
});

Demo at http://jsfiddle.net/YE7ZZ/3/


    CSS Howto..

    Bootstrap with Picture Slideshow

    How to make a vertically extendable DIV box from this image?

    How to do animation of using CSS and webkit

    How to use a global parent selector with CSS Modules

    How do I add a horizontal scrollbar to a table in a div?

    How can I add an external stylesheet to a UIWebView in Xcode?

    How to wrap text in css

    How to draw a checkmark / tick using CSS?

    How to play a second CSS animation once the first one finishes

    How to stop jquery loop function by a click while starting another loop function

    How to do auto slide for divs [closed]

    How do I make
  • with block elements sit beside each other?
  • How to format a title attribute with css (setting more width)?

    How to include css in my JSP?

    Chrome and Firefox render positioned layout with negative margin differently - how to prevent?

    How to prevent an absolutely positioned element to affect the scrollbar?

    How to apply an active state to a CSS sprite?

    How to use pure css selector to select hidden element

    How to make a menu have submenus in pure CSS

    how to make the title bar fixed

    How to style Zend Checkboxes

    jquery width toggle animation is showing vertical cells during animation takes place

    How to import a selector style into another selector style?

    How can I fill a fixed-size
    with a variable-size

    ?

    How to make my right-box float right…?

    CSS: how to remove the top-gap for sub-menus?

    How to prevent from loading a css and a js sheet at only one Rails controller?

    How to apply a css class for jqGrid height property setGridHeight?

    how to adjust CSS image on mobile device while maintaining the aspect ratio

    CSS: How to get an animated gif background-image on top of a div