Question

I have a div sidebar which scrolls with the page on my website. Everytime the window resizes, the sidebar would overlap the page content.

Here is a demo page to show the problem:
http://wrasa.org/memberpage_demo.html

Here is the CSS code for the menubar I’m using for my page

.menubar {width: 200px;position: fixed;left: 20px;down: 200px;}

Any suggestions for fixing the problem or using a different code would be welcomed,

Thanks in advance!

Answer 1

As, you are using fixed positioning; div will remain fixed relative to the browser and will overlap if other content shift in the area. This happens because browser don’t allocate any space to such divs.
In your problem you be solved by specifying the min-margin to left of main content, which can actually be achieved by min-width css property. just place one more to left of main content with some min width.

You can know more on this from this link

Using a percentage margin in CSS but want a minimum margin in pixels?