title: How to have div horizontally scroll when resized.
body: <p>I am trying to make content div show a horzontial scroll bar once the page becomes too narrow for the content inside of the content div. Currently, my setup is as follows:</p>
  
  <p><img src="https://i.imgur.com/8WfUc.jpg" alt="Current Display"></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="LeftNavigation"&gt;
      &lt;div id="TopNav"&gt;Menu1&lt;/div&gt;
      &lt;div id="BottomNav"&gt;Menu2&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="ContentContainer"&gt;
      &lt;div style="float: left; width: 500px"&gt;Content1&lt;/div&gt;
      &lt;div style="float: left;"&gt;Content2&lt;/div&gt;
  &lt;div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#LeftNavigation {
      float: left;
  }
  
  #TopNav,
  #BottomNav {
      width: 165px;
  }
  
  #ContentContainer {
      margin-left: 180px;
      min-height: 150px;
      padding: 10px;
  }
  </code></pre>
  
  <p>I'd like to have my page work like the image below. Where my content container has a minimum width of say...600 pixels and then when the page width gets below the combined width of the menu and content(including margins), a scroll bar shows up. I can't figure out how to get this to work properly, though. My ContentContainer div keeps wrapping below my LeftNavigation div whenever the page becomes too narrow. Thanks in advance.
  <img src="https://i.imgur.com/uFfhZ.jpg" alt="Desired Display"></p>