On my webpage, there is a fixed menu element td on the left side that remains in place while scrolling. This fixed menu is 150px wide, while the page container spans 100% of the width. When using position:fixed, it removes the element from the normal layout flow, requiring adjustments to ensure everything remains visible. As a result, I have applied margin-left:150px to the page container, causing it to overflow by 150px off the right side of the screen, resulting in a horizontal scroll bar appearing.
Simply hiding the overflow is not an option because elements need to be horizontally centered and would end up too far right if hidden. Calculating this dynamically with JavaScript is also not feasible due to the collapsible nature of the menu, making it necessary to recalculate the width each time the menu collapses. Additionally, editing the HTML directly is not possible as I am redesigning the site exclusively with CSS and JavaScript/jQuery.
To better illustrate the issue, here is a demo link: http://jsfiddle.net/3yBRV/4/embedded/result/