How to fix the position of an element, but also exit the window?

Question

Say I have the right menu in a browser window:

___________________________ | Right | content | Menu | | | | | | | | | | | | | | | ___________________|_______| 

I want the menu to be fixed so that the user sees the same thing as he / she scrolls down. Therefore, I set the position: fixed for the correct menu.

However, I also want the menu not to display if the window is too small. that is, the window should display the full content in front of the right menu.

Like this:

 _________________________ | Ri | content | Me | | | | | | | | | | | | | | | ___________________|____| 

Is there any way to do this in pure css? If not, a very simple js fix?

Edit:

I have a related question, so I didn’t want to ask another question:

I have a fixed width for the right menu, but I need the left content to automatically adjust its width (fill the left side). Is there a way to do this in css and save the above functions?

Answer 1

If you know the size of your content, you can use the following:

 position:fixed; left:800px; 

but not:

 position:fixed; right:0; 

If your content is 800 pixels wide. This means that your calculation works on the left, and the menu will exit the screen if the user window is smaller than this.

Update

It looks like your requirements are as follows:

• You have a content area with a minimum width.
• You need your menu to scroll with the user.
• You need your menu to appear on the right until the menu encroaches on the minimum width of your content.

I would recommend using JavaScript to solve this problem, you can achieve this in pure CSS, but by placing your menu on a fixed layer that spans the entire page. Although the logic here works in modern browsers - due to z-indexing of the contents of the menu-mdash container; I would really like to see what older user agents can do:

pure css version

CSS

 /* make sure our content doesn't collapse too small */ .content { position: relative; z-index: 20; min-width: 700px; margin-right: 200px; } /* place our menu container across the entire page */ .menu-container { position: fixed; z-index: 10; left: 0; right: 0; top: 0; bottom: 0; } /* a layer that mimics what our content does */ .menu-offset { position: relative; min-width: 700px; margin-right: 200px; height: 100%; } /* finally the menu attached to the right of the menu offset */ .menu-content { position: absolute; width: 200px; height: 100%; left: 100%; background: #ddd; } 

Markup

 <div class="content"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis adipiscing magna sed ipsum convallis vel fringilla nibh viverra. Nulla et ligula vel urna scelerisque imperdiet a et lectus. Nunc commodo, nibh id blandit mollis, leo quam eleifend urna, at rhoncus turpis justo sit amet erat. Quisque tempus nunc vitae eros fringilla eget imperdiet neque tincidunt. Donec ac posuere diam. Nam nibh nibh, sollicitudin non blandit ut, auctor in dolor. Nullam lobortis condimentum consequat. </p> <p> Maecenas at orci massa, quis congue mauris. Vivamus varius tincidunt nunc, eget <a href="#canyouclickthis">pellentesque arcu faucibus</a> ac. Suspendisse rhoncus orci eu felis consectetur rutrum. Nullam sed mauris eros. Nunc dignissim, libero dapibus consectetur lobortis, ante urna faucibus dui, vel luctus metus leo id magna. Pellentesque mi ligula, commodo ac pellentesque et, auctor sed neque. Phasellus dapibus tellus faucibus dui vehicula hendrerit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p> </div> <div class="menu-container"> <div class="menu-offset"> <nav class="menu-content">Menu</nav> </div> </div> 

With the above, I would expect that older browsers would either render so that you could not interact with anything in the contents of the div - see the link #canyouclickthis - or not support position:fixed anyway:

http://caniuse.com/css-fixed

update 2

And, I just noticed your comment regarding the width of 80% . Modifying the above may work for this, however it is probably best to avoid using percent widths when you have a fixed width menu - especially with the conditions you specify: - and rely on the minimum and maximum widths instead. Either this, or use a menu with a percentage width rather than a fixed one.

Depending on how you set up your markup, the following may work. This approach takes into account the fact that if you do not specify left , top , bottom or right , the layer should remain where it is installed (not 100% true in older browsers). You can specify sizes for the .menu layer for less modern .menu . This solution has an additional advantage: do not close the entier page in a fixed layer :)

 .content { position:relative; width:80%; min-width: 800px; float:left; } .menu-container { position:absolute; left:100%; top:0; } .menu-content { position: fixed; width:20%; height:100%; background:#ddd; } <div class="content"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis adipiscing magna sed ipsum convallis vel fringilla nibh viverra. Nulla et ligula vel urna scelerisque imperdiet a et lectus. Nunc commodo, nibh id blandit mollis, leo quam eleifend urna, at rhoncus turpis justo sit amet erat. Quisque tempus nunc vitae eros fringilla eget imperdiet neque tincidunt. Donec ac posuere diam. Nam nibh nibh, sollicitudin non blandit ut, auctor in dolor. Nullam lobortis condimentum consequat. </p> <div class="menu-container"> <nav class="menu-content">Menu</nav> </div> </div> 

Again, it would be better to test this in Internet Explorer, since I do not have access to this particular user agent.

Answer 2

For the second part of your question, select the element content a margin-right or padding-right , equal to the width of the menu

So

 .menu{ position:fixed; top:0; bottom:0; right:0; width: 240px; /*the fixed width you want*/ } .content{ /*assuming there is a wrapper element*/ margin-right:240px; /*same as fixed width of menu*/ } 

Demo at http://jsfiddle.net/gaby/MMnhZ/

Answer 3

Using jQuery, you can calculate the width of the window and the width of your content, and then assign it to the left menu value.

 var leftPosition = ($('#wrapper').width() / 2 ) + ($(window).width() / 2); $('#menu').css("left", leftPosition); 

Use $ (window) .resize (); recount it if the window changes. Add an if / else statement to make sure it stays above a certain amount and you are set up.

Here's jsFiddle showing the result