Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

How to prevent most page content from shifting right?

more options
I am have no problem viewing page http://konicaminolta.ca/business/index.html in Firefox. However, some site visitors using the same browser (Firefox version 25) and same OS find most page content very right-shifted. This right-shifting appears to take place within the
section, and does not appear within IE or Chrome. I'd post a screen shot if I had this option.
I am have no problem viewing page http://konicaminolta.ca/business/index.html in Firefox. However, some site visitors using the same browser (Firefox version 25) and same OS find most page content very right-shifted. This right-shifting appears to take place within the <div id="contentsArea"> section, and does not appear within IE or Chrome. I'd post a screen shot if I had this option.

Chosen solution

The <div id="bodyArea"> needs style="width:100%". I'm not sure why, but it is shrinking to fit the floated content.

The <div id="contentsArea"> is floated to the right and has style="width:100%" but Firefox computes width relative to the parent element, <div id="bodyArea">, and that apparently is indeterminate and needs to be set explicitly.

Actually, it is shrinking to float up next to the blank area of the navigation bar. See cor-el's reply: https://support.mozilla.org/en-US/questions/978904#answer-506108

Read this answer in context 👍 1

All Replies (8)

more options

If you have a screen shot, that would be great. You can attach it to a reply, using the "Browse" button below the text box.

more options

Chosen Solution

The <div id="bodyArea"> needs style="width:100%". I'm not sure why, but it is shrinking to fit the floated content.

The <div id="contentsArea"> is floated to the right and has style="width:100%" but Firefox computes width relative to the parent element, <div id="bodyArea">, and that apparently is indeterminate and needs to be set explicitly.

Actually, it is shrinking to float up next to the blank area of the navigation bar. See cor-el's reply: https://support.mozilla.org/en-US/questions/978904#answer-506108

Modified by jscher2000 - Support Volunteer

more options
I meant to say this right-shifting appears to take place within the
section, and wonder if it's jQuery-related.
more options

Another solution, which does not require a width rule for bodyArea, is to remove the overflow:hidden rule from bodyArea.

To ensure that bodyArea fully "contains" contentsArea, which resolves a strange issue with some horizontal lines, you can use one of the classic float containment tricks, such as placing a clearing div as the last element on bodyArea:

<div style="clear:both"></div>

Edit: best solution is: https://support.mozilla.org/en-US/questions/978904#answer-506108

Modified by jscher2000 - Support Volunteer

more options

Screen shots related to that last reply:

  • with overflow:hidden rule as served
  • turning off that rule so the default overflow:visible is applied
  • adding a clearing div at the end of bodyArea (using DOM Inspector extension)
more options

Adding #bodyArea {clear:both} works for me.

more options

Hi cor-el, yes, you're right, that is the simplest solution.

I hadn't noticed the coincidence of the width of the content and the remaining blank area on the navigation bar.

Maybe some users have additional content on the bar, e.g., menus only available to logged in users, so when it was tested, the problem wasn't noticed because the bar was fully occupied??

more options

Thank you jscher2000 and cor-el so much!

Explicitly setting bodyArea width to 100% solved this problem some users experienced using our site. I didn't have an opportunity to try #bodyArea {clear:both} because I can't replicate this issue on my computer.

Modified by brianInVancouver