html - Divs Shift When Content Gets Too Large -

I am facing some weird behavior with the project:

< P> When you click on the rules, pixels or three link to the entire layout shifts on the left side I have attributed it to the amount of content in that div, because when you click on the 'score' link , In which there is a small content height.

The following devilinease looks like the following:

   & Lt; P & gt; Roll the dice by clicking on the roll button. You have 3 rolls per turn, after rolling you can choose to keep the dice through the roll. To keep it through a twist, click on one to die, click on an option and click on the score roll to submit a combination of dice or to claim Yatashi either click on Zee button, or select anything without the score roll . To claim Yahtsi, either click on Zee button, or scroll anything without selecting anything. To claim Yahtsi, either click on Zee button, or scroll anything without selecting anything. To claim Yahtsi either click on Zee button, or score roll without having to select anything. & Lt; / P & gt; & Lt; / Div & gt; & Lt; Div id = "scoresDiv" & gt; & Lt; H1 & gt; Score & lt; / H1> & Lt; P & gt; 1 & lt; / P & gt; & Lt; / Div & gt; & Lt; P id = "closeTest" & gt; & Lt; Span id = "close" & gt; Closed & lt; / Span & gt; & Lt; / P & gt; & Lt; / Div & gt;  

I am using jquery functions to swap between scores and rules. I little content is a fixed width. There is no width in the internal rule and score divis.

Any thoughts? I know that more detailed CSS is required on divs.

when rule div is shown, due to the scrollbar being visible Is born. First of all, this is not really a big deal .. I will leave it alone.

If it harms you in fact , then add it to your CSS:

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

This will force a scrollbar to always be present so that the layout is not shifted.