How to Position Elements to the Negative Right Position and Prevent Horizontal Scrollbars

18. May, 2011 1 Comment

Whether you’re a beginning Web Developer or a seasoned pro, absolute positioning elements to the right of your main containers without turning on the horizontal scrollbar can be a pain.

The Problem: Negative Absolute Right Positioning Causes a Scrollbar to Appear

Perhaps you have some design elements, a nifty graphic or some text that runs outside the main container, that needs to be positioned to the right of your main wrap:

Example of Design Element Outside Main Container

Here’s how your code may look on your site right now:

Problem Demo: Right Absolute Positioning Causes Scrollbar

See how when you reduce your browser size the elements outside the main container cause a scrollbar to appear?

Problem: scrollbar appears at bottom of page

The Fix: CSS Magic and a bit of DOM Rearranging

The main issue with the scrollbar displaying has to do with the way the elements are placed in the DOM and the styles that affect them. Take a look at how we arrange the elements differently in our page structure and with a bit of styling can make the elements positioned off page be ignored by the horizontal scrollbar:

Fix Demo: Right Absolute Positioning Causes Scrollbar

You may be scratching your head wondering what the main differences are between these two demos. Here’s a breakdown:

Body tag has overflow:auto property provided
Container element has overflow: hidden
‘Left’ and ‘Right’ elements are moved within the ‘main’ div container

Hopefully you can see how using this layout can be beneficial to creating some really cool websites. You don’t have to worry about how to develop designs that have graphics splashing out of the main containers. Designers are happy, and now are the developers.