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

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.