Prevent HTML elements from overlapping on smaller screens

Question

I have two elements on the page that are aligned side by side with each other. The item on the left is fixed. My default screen resolution is 1280x800. As the screen resolution decreases to 1024x * or less, the left and right containers tend to overlap. Is there a problem with this problem? How to do it?
-------------------------------------------------- ---------Edit---------------------------------------- -------------------
Actually, the element on the right is assigned a predefined width and is set margin:0 autoto be oriented to the center of the screen. Item in righton the left is a vertical menu, and therefore I want it to stay fixed even when the user scrolls the page. So I pointed out for him position:fixed.

Answer 1

You can do this client side by compressing containers accordingly in the window.onresize event handler.

Answer 2

If they collide, because the screen is not large enough to hold both of them, try to set the width of the elements as a percentage: <tag style="width: 80%;" />.