fmz 14

I am working on a site for client and noticed that the content shifts slightly when transitioning from the home page to any of the inside pages.

The only difference between the home page and the inside pages is the width of the two main content columns: content and sidebar.

Here is the CSS:

#content                        { width: 660px; float: left; }
body#inside #content            { width: 699px; }
#sidebar                        { width: 310px; float: right; margin: 0 10px 0 0;  }
body#inside #sidebar            { width: 271px; }

I would appreciate some insights as to what is causing this slight jerk, which will in turn lead to a solution to fix it.


2 answers


There's less content on some of the inside pages, and you're therefore not getting a vertical scrollbar.

Add this CSS to show the scrollbar on all pages, which will remove this jump.

html { overflow: -moz-scrollbars-vertical; overflow-x: auto; overflow-y:scroll;}

Answered over 8 years ago by John Catterfeld
  • Hi John, the layout is different and the pages longer, but I wouldn't say there was more content. The biggest difference is the difference in width of the content area and the sidebar. fmz over 8 years ago
  • Can you give two specific pages on which the problem occurs? John Catterfeld over 8 years ago
  • John. Go to the home page, see link above, and then click on the blog link. fmz over 8 years ago
  • Hmm, sorry I can't see the problem I'm afraid, other than there being a vertical scroll on one page and not the other. Am I missing something obvious? Can you give a better description of the jerk? What browser are you using and resolution? John Catterfeld over 8 years ago
  • I am using Firefox and the main content shifts right and left about 1/4 inch when I switch between home and the blog pages. fmz over 8 years ago

You have a 20px left margin on the blog content, but not the homepage margin, is this what you mean?

You can fix by adding 20px left padding to #content on the homepage, but you'll have to reduce the width of .concierge to 203px. You should be able to leave the inner #content width unchanged.

#content { padding-left: 20px; }

.concierge { width: 203px; }

Answered over 8 years ago by John Catterfeld