Divs Shift When Content Gets Too Large

Question

I'm experiencing some strange behavior with a project i'm working on:

http://daft.net76.net/yah/

When you click the rules link the entire layout shifts to the left by a pixel or three. I've attributed this to the amount of content in that div, because when you click the 'Scores' link, which has a smaller content height.

The lower div structure looks like the following:

<div id="lowercontent">
    <div id="rulesDiv" >
     <h1>Rules</h1>
     <p>Clicking the roll button rolls the dice. You have 3 rolls per turn.
     After rolling you can choose to keep dice through rolls. Click a die to keep it through a turn.
     Submit a combination of dice by clicking an option and clicking Score Roll.
     To claim yahtzee either click the zee button, or score roll without anything selected.
     To claim yahtzee either click the zee button, or score roll without anything selected.
     To claim yahtzee either click the zee button, or score roll without anything selected.
     To claim yahtzee either click the zee button, or score roll without anything selected.</p>
    </div>
    <div id="scoresDiv">
     <h1>Scores</h1>
     <p>1</p>
    </div>
    <p id="closeTest"><span id="close">close</span></p>
</div>

I'm using jquery functions to swap between the scores and rules. lowercontent is a fixed width div. The inner rules and scores divs have no width.

Any ideas? Let me know if more detailed css on the divs is needed.

Answer 1

My original answers are below but the truth is, there's only one good answer to this if you feel you need to do anything at all: modal windows.

A modal window is one that pops to the foreground and needs to be actioned before you can carry on doing what you were doing. You've used one before even if you didn't know the name. One example is an open file dialogue in an application. You have to pick a file or cancel to carry on.

On the web, you can replicate this functionality quite easily. It involves "overlay" over the content to stop the user touching it and the modal box on top of the overlay. Most web-examples shade the overlay to let the user know what has focus.

This fixes your problem because it stops the content getting longer by putting the new content over the old content and therefore the scroll-bar doesn't need to show.

Luckily for you, there are prefab solutions (see the last line of this) but I think the one that will work best for you is Facebox. It's light and sexy and does the job of just showing some information. it doesn't look like you need to get too bogged down in other actions.

---

Here, at least, it's because the scrollbar on the window pops up.

There are a few ways to fix this but all are pretty hacky or imperfect:

1. Use a left-aligned design.

2. On load, if the height is bigger than the computed height of the content (no scroll bar) force the content to create a scrollbar. Compare widths. Deduct half this from your left margin on your content. Yuck!

3. Manually centre the content using onload and onresize hooks to change the margin on the content. Probably the cleanest and you can leave it on margin:auto just in case. This won't work for IE6 but I guess that's expected.

4. You can put the content into tabs that the user has to switch between.

5. Use pop-in modal layers instead of attaching the content to the bottom of the page. I'm thinking something like LightBox but with content instead of images. I think there's probably a script out there that does this with content already.

Edit: See this for more tips on modal windows.

Answer 2

When the Rules div is shown, it is causing the scrollbar to appear. First, its really not a big deal.. I would just leave it alone.

If it really bothers you, add this to your CSS:

html { height: 100% }
body { height: 101% }

This will force a scrollbar to always be present so the layout won't shift.