title: Prevent HTML elements from overlapping each other on smaller screens
body: <p>I have two elements on a page that are aligned side by side to each other. The element 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 each other. Is there a fix to this problem? How do I do it?<br>
  -----------------------------------------------------------Edit-----------------------------------------------------------<br>
  Actually, the element to the right is assigned a pre-defined width and is set to <code>margin:0 auto</code> to keep it oriented to the center of the screen. The element to the <s>right</s> left is a vertical menu, and hence, I want it to stay fixed even when the user scrolls the page. Hence I've specified <code>position:fixed</code> for it.</p>