如何使固定位置菜单旁边的内容在较小的分辨率下不重叠

Question

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!

Answer 1

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/

Answer 2

Change the CSS based on the width of the screen/viewport.

Add this to your head:

<meta name="viewport" content="initial-scale=1">

Have your css rules changed based on size:

@media screen and (min-width : ###px) and (max-width : ###px) {
   .your-css-here{
   }
}

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

In doing this, you can change your fixed nav menu to display differently.

IE:

@media screen and (max-width : 1024px) {
   nav{
      position:relative;
      etc...:...;
   }
 }

Edit--- Had max/min-device-width . Needs to be max/min-width .

Answer 3

Not sure it will be exactly what you want/need but you could as well use absolute positioning for the div with id="positioner". Simply replace your margin-left:250px by

position: absolute;
left: 250px;
right: 0;
overflow: auto;

I modified a little bit the Fiddle. You can find the new version here

Answer 4

You can do this with floats. You may need to use a clearfix if you want the container (#wrap) to pick up the heights.

There is a fiddle here: http://jsfiddle.net/EqXBp/

CSS:

#left {
    float: left;
    border:1px solid red;
    background:pink;
    width:250px;
}

#content {
    border:1px solid green;
    float: right;
    width: calc(100% - 4px);
    margin:auto;
    background:grey;
}

Answer 5

It's a pretty simple fix now that I understand what you're wanting. Just have to make your positioner wrapper absolute and set its markers and tell it to scroll.

 #positioner {
     position: absolute;
     top: 0px;
     left: 250px;
     right: 0px;
     bottom: 0px;
     overflow: auto;
 }

Answer 6

First you must understand how fixed position works. It is a position relative to the screen's viewport and it doesn't move when scrolled.

The following solution styles your left box relatively but makes it behave as fixed.

Add the following to your CSS:

#wrapp {
  min-width: 955px;
}
#left {
  position: relative;
  float: left;
  width: 250px;
  top: 0;
}
#positioner {
  position: relative;
  float: left;
  margin-left: 0;
}

Use this Javascript program to keep the left menu on the top:

<script>
function scrollTop() { return document.body.scrollTop || document.documentElement.scrollTop; }

$( document ).ready(function() {
    $(window).scroll(function() {    
        $("#left").css({ top: scrollTop() + 'px' });
    });    
});
<script/>