title: How do I prevent my website layout from shifting while loading?
body: <h2>Problem:</h2>
  
  <p>When I load a website that I designed, the layout is wonky for a brief moment while the page loads, then snaps into the correct place. This behavior occurs in at least Safari and Chrome.</p>
  
  <p>How to I keep everything in the proper, final place while the page loads?</p>
  
  <h2>Code:</h2>
  
  <p>HTML in question on codepad (with details changed for privacy reasons): <a href="http://codepad.org/GSGHYF0N" rel="nofollow">http://codepad.org/GSGHYF0N</a></p>
  
  <p>Stylesheet: <a href="http://codepad.org/Yr4ULwi0" rel="nofollow">http://codepad.org/Yr4ULwi0</a></p>
  
  <h2>Additional Info:</h2>
  
  <ul>
  <li>The most obvious thing that is out of place is the
  <code>&lt;h2&gt;Location&lt;/h2&gt;</code>.</li>
  <li>Images are all the size indicated in the HTML and CSS.</li>
  <li>This is <strong>not</strong> the problem where the entire layout shifts as one because a scroll-bar appears.</li>
  </ul>
  
  <h2>Resources</h2>
  
  <p>Information on Google Developers have been useful, but haven't indicated how to fix my particular problem. However, StackOverflow won't let me post these links because of spam-prevention.</p>
  
  <p><a href="http://jsfiddle.net/QHeG8/" rel="nofollow">http://jsfiddle.net/QHeG8/</a></p>