How can I make a div with “position:fixed” to stay out of the screen if the window overflows?


Tags: html,css,positioning,css-position,screen-size

Problem :

I have two divs as in the illustration below. The position of div #2 is fixed, so it sticks to the right side of the screen no matter how small it might be. If the screen is small, then the div #2 starts to overlap over div #1, which I do not want. I know that this problem is being caused because the left and right positions of both divs are in percentages, but they must stay in percentages only. I can work around this problem using Javascript, but I was thinking of a pure CSS solution for the users who may have Javascript disabled.

+---------+ +---------+
|         | |         |
|         | |         |
|   #1    | |    #2   |
|         | |         |
|         | |         |
+---------+ +---------+

What's happening if the screen is small:

+------ +---------+
|       |         |
|       |         |
|   #1  |    #2   |
|       |         |
|       |         |
+------ +---------+
-------scrollbar---

What should happen (screen ends where the scrollbar ends):

+---------+ +------
|         | |      
|         | |      
|   #1    | |    #2
|         | |      
|         | |      
+---------+ +------
------scrollbar----


Solution :

Use margin to position your div #2 rather than position: fixed.


    CSS Howto..

    How to override bootstrap styles?

    save CSS - while browsing, how can I save the css files from inside chrome dev or firebug to local directory [duplicate]

    CSS : How to make two column right fluid left fluid depend on right

    DOMPDF - How to render PDF to have no margins at all?

    CSS - how to align different font-sizes to each other?

    How to make only background image transparent in responsive square grid?

    How to vertically center div in floated div?

    How To Make Entire 'li' Area and Text A Clickable Link

    How to write a fallback for css files not loaded, loading too long and blocked? [duplicate]

    How to fix animation problems css3

    How to define a good convention for css?

    how to put img inside circle in html and css?

    How to use an image as a frame, and scroll inside? Simulating a phone on a website

    How to customize the EditorFor CSS with razor

    How to create a DIV style switcher in JavaScript?

    How to change a portion of text on hover with css [duplicate]

    How to close CSS3 Lightbox by clicking outside of the current image?

    How to Make Image Do All 3: Cover (left-to-right), Resize, and Scroll

    CSS, Javascipt, HTML, how can i align a text inside a div to middle beside an image? and animate the text

    How to figure out what is the right target to put in CSS

    How to create border between two divs with dynamically changing heights?

    How to fade out after hover is done using CSS

    How to place a div right below another div?

    How to set a CSS background to scroll slowly?

    ASP.NET How to set Text to the right side of image

    How to stop breaking tables border when page is spliting?

    Why does the Jcrop-tracker not show it's correct position?

    how to dynamically append tr element with css to a table

    How to apply css style for HTML element using Mootools

    How to make the width of a div in the middle responsive