title: How to stop Div from moving when resizing browser window
body: <p>I have a sidebar and an area for the content of my website. The sidebar is fixed, but the page content can be scrolled. However when the browser window is resized, the page content div is being pushed to the left as it is set to float to the right, and I would like it to never go further to the left than it is (currently it will slowly hide under the sidebar content). You can see what's happening in the screenshots below:</p>
  
  <p>The first screenshot shows the fullscreen browser window and the one below it shows what it's like when the browser window is resized:</p>
  
  <p><a href="https://i.stack.imgur.com/WYM6O.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WYM6O.jpg" alt="Fullscreen"></a></p>
  
  <p><a href="https://i.stack.imgur.com/uQ23r.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uQ23r.jpg" alt="Resized"></a></p>
  
  <p>How can I get the page content to resize, centered and never go past where the sidebar is, as currently the image and the text below it will get hidden underneath the sidebar and instead would like it to resize against the sidebar. The code I have is below.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* Main CSS */
  html, body {
      padding: 0;
      margin: 0;
      font-family: "Futura PT", sans-serif;
  }
  
      /* Sidebar */
  #sidebar {
      background-color: #FFFFFF;
      width: 400px;
      height: 100%;
      padding: 10px;
      float: left;
      position: fixed;
  }
  
  
  /* Page Content */
  #pageContentContainer {
      display: block;
      width: 100%;
      text-align: center;
      margin: 0 auto;
  }
  
  #pageContent {
      float: right;
      width: 78%;
      background-color: #212121;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
      &lt;div id="sidebar"&gt;
          &lt;a href="index.html"&gt;&lt;img src="images/logo/mdLogo.png"&gt;&lt;/a&gt;
          &lt;nav&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="index.html"&gt;HOME&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;PHOTOGRAPHY&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;GRAPHIC DESIGN&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;3D MODELLING&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
          &lt;div id="socialLinks"&gt;
              &lt;a href="#/" class="fa fa-linkedin fa-3x"&gt;&lt;/a&gt;
              &lt;a href="#/" class="fa fa-facebook fa-3x"&gt;&lt;/a&gt;
              &lt;a href="#/" class="fa fa-youtube-play fa-3x"&gt;&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      
      &lt;div id="pageContentContainer"&gt;
          &lt;div id="pageContent"&gt;
              &lt;!-- Parallax --&gt;
              &lt;div class="parallaxImage1"&gt;&lt;/div&gt;
  
              &lt;div class="parallaxContent"&gt;
                  &lt;h1&gt;A little about me...&lt;/h1&gt;
                  &lt;p&gt;Information goes here.&lt;/p&gt;
              &lt;/div&gt;
  
              &lt;div class="parallaxContent"&gt;
                  &lt;h1&gt;A little about me...&lt;/h1&gt;
                  &lt;p&gt;Information goes here.&lt;/p&gt;
              &lt;/div&gt;
  
              &lt;div class="parallaxContent"&gt;
                  &lt;h1&gt;A little about me...&lt;/h1&gt;
                  &lt;p&gt;Information goes here.&lt;/p&gt;
              &lt;/div&gt;
  
              &lt;div class="parallaxContent"&gt;
                  &lt;h1&gt;A little about me...&lt;/h1&gt;
                  &lt;p&gt;Information goes here.&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Any help with be greatly appreciated! It's probably something simple I've missed somewhere maybe? Thank you!</p>