title: How to have a sidebar on the right in a responsive page with maximum width?
body: <p>This is the layout I'm trying to achieve with my page:</p>
  
  <p><img src="https://i.stack.imgur.com/gzQOW.png" alt="Desired layout"></p>
  
  <p>Basically, the hero and sidebar are two columns on the page. The hero text and image should both be in one <code>div</code>, so they should be treated as one element, like the sidebar. The <code>div</code> with the <code>content</code> ID has <code>max-width: 1150px;</code>. The reason I'm including the hero text and image separately is because I want to point out that the hero image is a <code>div</code> with a <code>background-image</code>, as opposed to an <code>img</code> element.</p>
  
  <p>The elements are structured like this:</p>
  
  <pre><code>&lt;div id="content"&gt;
      &lt;div id="hero"&gt;
          &lt;div id="heroText"&gt;
          &lt;/div&gt;
          &lt;div id="heroImage"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="sidebar"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The method I'm using right now is where I put <code>float: left;</code> on the <code>div</code> with ID <code>hero</code>, and <code>float: right;</code> on the <code>div</code> with ID <code>sidebar</code>.</p>
  
  <p>When I do this, and resize my browser below 1200px (margins + hero <code>max-width</code> + sidebar <code>width</code>), the sidebar goes below the hero, instead of the hero shrinking below its <code>max-width</code> value <code>800px</code>.</p>
  
  <p>How can I make the hero start to shrink instead of what happens now, the hero holding up until the browser shrinks below 900px (margins + hero <code>width</code>).</p>
  
  <p>The CSS used currently is below:</p>
  
  <pre><code>#content
  {
      margin: 0px auto;
      max-width: 1150px;
      padding-bottom: 50px;
      padding-left: 50px;
      padding-right: 50px;
      padding-top: 25px;
  }
  #hero
  {
      float: left;
      max-width: 800px;
      width: 100%;
  }
  #heroText
  {
      font-family: Lato;
      font-size: 24pt;
      font-weight: lighter;
      height: 150px;
      margin: 0px auto;
      max-width: 600px;
      text-align: center;
  }
  #heroText p
  {
      margin-bottom: 20px;
      margin-top: 0px;
  }
  #heroImage
  {
      background-image: url(heroImage.png);
      background-repeat: no-repeat;
      background-size: contain;
      height: 450px;
      text-align: center;
  }
  #heroButton
  {
      margin-top: 90px;
      width: 240px;
  }
  #news
  {
      float: right;
      width: 300px;
  }
  #newsPane
  {
      background-color: #666666;
      border-radius: 10px;
      display: inline-block;
      color: #fff;
      height: 450px;
      width: 300px;
  }
  #newsPaneText
  {
      font-size: 12pt;
      font-weight: lighter;
      max-height: 350px;
      overflow: auto;
      padding-left: 10px;
      padding-right: 10px;
  }
  #newsPaneText h1
  {
      font-size: 18pt;
      font-weight: lighter;
      margin-top: 5px;
  }
  #newsPaneText small
  {
      font-size: 10pt;
      font-weight: bold;
  }
  #newsPaneButton
  {
      margin-left: 60px;
      margin-top: 25px;
      width: 180px;
  }
  #emailPane
  {
      background-color: #e5e5e5;
      border-radius: 10px;
      color: #333;
      display: inline-block;
      height: 130px;
      margin-top: 20px;
  }
  #emailForm
  {
      padding-left: 10px;
      padding-right: 10px;
      margin-top: 5px;
  }
  #emailField
  {
      background-color: #fff;
      border: none;
      border-radius: 5px;
      color: #333;
      font-family: Lato;
      font-size: 14pt;
      height: 27px;
      margin-top: 10px;
      padding: 0px;
      width: 280px;
  }
  #emailSubmitButton
  {
      float: right;
      margin-top: 10px;
      width: 120px;
  }
  #emailFormStatus
  {
      float: left;
      font-size: 11pt;
      font-weight: bold;
      margin-top: 15px;
  }
  </code></pre>