title: How to make formatted text not shift a bit when chaning
body: <p>I made this little jQuery/Javascript timer page just because I was bored.  It works great except that when the numbers are changing; there's a discernible "jump" on the page.  </p>
  
  <p>I don't have the slightest idea how to make it count up smoothly can someone help me out?
  Can be viewed <a href="http://psyllexstudios.com/training/jquery_timer" rel="nofollow">HERE:</a>  </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'&gt;
          &lt;style&gt;
              header{
                  font-family: 'Montserrat', sans-serif;
                  font-size: 60px;
                  color: white;
                  text-shadow: 3px 3px 3px #000000;
                  background-color: #4169E1;  
                  /*position: absolute;*/
                  width: 110%;
                  padding-top: 55px;
                  padding-bottom: 55px;
                  margin-top: -10px;
                  margin-bottom: 0px;
                  margin-left: -5%;
                  text-align: center;
              }
              #text{
                  color: #000000;
                  font-family: 'Montserrat', sans-serif;
                  font-size: 120px;
                  margin-top: 55px;
                  text-align: center;
              }
              #title{
                  color: #000000;
                  font-family: 'Montserrat', sans-serif;
                  font-size: 60px;
                  margin-top: 25px;
                  text-align: center;
              }
              .buttons{
                  color: #000000;
                  font-family: 'Montserrat', sans-serif;
                  font-size: 48px;
                  margin-top: 25px;
                  text-align: center;
              }
              #start{
                  padding: 15px;
                  font-size: 48px;
                  border: 2px solid;
                  border-radius: 10px;
                  border-color: #000000;
                  color: #FFFFFF;
                  text-shadow: 3px 3px 3px #000000;
                  background-color: #4169E1;  
              }
              #stop{
                  padding: 15px;
                  font-size: 48px;
                  border: 2px solid;
                  border-radius: 10px;
                  border-color: #000000;
                  color: #FFFFFF;
                  text-shadow: 3px 3px 3px #000000;
                  background-color: #4169E1;  
              }
              #reset{
                  padding: 15px;
                  font-size: 48px;
                  border: 2px solid;
                  border-color: #000000;
                  border-radius: 10px;
                  color: #FFFFFF;
                  text-shadow: 3px 3px 3px #000000;
                  background-color: #4169E1;  
  
              }
          &lt;/style&gt;
          &lt;script src="jquery.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;header&gt;
              jQuery Timer
          &lt;/header&gt;
  
          &lt;div class="buttons"&gt;
              &lt;button id="start"&gt;Start&lt;/button&gt;
              &amp;nbsp&amp;nbsp
              &lt;button id="stop"&gt;Stop&lt;/button&gt;
          &lt;/div&gt;
          &lt;div id="text"&gt;00:00:00&lt;/div&gt;
          &lt;div class="buttons"&gt;
              &lt;button id ="reset"&gt;Reset&lt;/button&gt;
          &lt;/div&gt;
          &lt;script&gt;
                  function formatSecondsAsTime(secs) {
                    var hr  = Math.floor(secs / 3600);
                    var min = Math.floor((secs - (hr * 3600))/60);
                    var sec = Math.floor(secs - (hr * 3600) -  (min * 60));
  
                    if (hr &lt; 10)   { hr    = "0" + hr; }
                    if (min &lt; 10) { min = "0" + min; }
                    if (sec &lt; 10)  { sec  = "0" + sec; }
                    if (hr)            { hr   = "00"; }
  
                    return hr + ':' + min + ':' + sec;
                  }
              var num = 0;
              var stopFlag = 0;
              function counting(){
                  setTimeout(function(){
                      if(stopFlag &lt; 1){
                          num++;
                          $("#text").html(formatSecondsAsTime(num));
                          counting();
                      }
                  }, 1000);
              };
  
              $("#start").click(function(){
                  stopFlag = 0;
                  counting();
               });
  
              $("#stop").click(function(){
                  stopFlag = 5;
               });
  
              $("#reset").click(function(){
                  stopFlag = 5;
                  num = 0;
                  $("#text").html("00:00:00");
              })
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>