Hi there.

So I have 2 pages with 3 divs. A content div containing a fixed sidebar div and a main div. The problem is when you're on the Index page and you click to go to the Contact page, the sidebar moves, or rather divs move, and I don't get what the problem is. Can anybody help me out? Thank you in advance!

I have the source code on dropbox because I thought it would be easier that way. Also, sorry in advance for my messy CSS. I'm kinda new to this!

https://www.dropbox.com/s/kd7ukjk1j15ptkn/Test3.zip

Do us all a favor, put the site up online somewhere and post a link so we can see. Most of us are not going to download the files and look through a bunch of code. If we can see it online that makes it easier for us to just see the problem and tell you what you should do.

Yes, please... having the relevant code easily availble makes it easier to help you.

In any event, I had an idea about the issue based on your description. I took a look at your files and I didnt see the problem right away because the content of both of your pages fits nicely on my monitor. However, when I reduce the size of the window or increase the zoom level the problem appears as expected.

If you notice that when your content doesnt fit in the display, the page with this content will also have the scroll bar on the right side. The page that doesnt have much content and displays in the window nicely doesnt have the scroll bar.

One way to fix this is to show the scroll bar on the right side on all of your pages regardless. Here's how...

html {
    overflow-y: scroll;
}

Thank you JorgeM for the solution. You really helped me out a lot as I was stressing over this problem! And sorry Ill post the code here or online next time!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.