title: CSS - 2 Columns, One Fixed width, One Responsive
body: <p>There are many examples on this topic here, but what I am after is something that I cannot seem to find the answer to. </p>
  
  <p>I want to create a two column page:
  Left column for Navigation (Fixed Width), Right column for content (Responsive). The variation I am after is that I want the Nav to appear on the left for desktop and beneath the content on mobile.</p>
  
  <p>I have the code 'working' kind of, but it's the responsive width of the right column that is the issue.</p>
  
  <p>My code is below, Any guidance would be really valued.</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>.CF:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
  .CF { display:inline-block; }
  .CF { display:block; }
  
  .content {max-width: 1300px; margin: 0 auto; padding: 0 25px; display:block; }
   .information {display:block; background: lime;}
   .menu {display:block;  background: lightblue;}
   
  @media all and (min-width: 992px) {
  .content {padding: 0 50px; }
   .information {display:block; float: right; width: auto;  }
   .menu {width: 250px; float:right; }
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="content CF"&gt;
  
  &lt;article class="information"&gt;
      Article Information
  &lt;/article&gt;
  
  &lt;nav class="menu"&gt;
      Menu
  &lt;/nav&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>