title: How to force a fixed column width with a Bootstrap grid and keep the other ones fluid
body: <p>I am using Bootstrap and I want to create the grid layout shown on the following image. </p>
  
  <p>I would like to have a sidebar with a fixed with of 330px, no matter which screen sizes and keep everything inside <code>#page-content</code> re sizable depending on the resolution of my visitor's screen. <a href="https://i.stack.imgur.com/6aWeo.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/6aWeo.jpg" alt="grid"></a></p>
  
  <p>How can I achieve the layout shown on the image? If I do the following:</p>
  
  <pre><code>&lt;div class="col-md-10" id="page-content"&gt;
     &lt;div class="col-md-2"&gt;...&lt;/div&gt;
     &lt;div class="col-md-10"&gt;...&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="col-md-2" id="sidebar"&gt;
     ...
  &lt;/div&gt;
  </code></pre>
  
  <p>and try to fix the width of <code>#sidebar</code> with <code>width="330px";</code> for smaller screen sizes, the content will shift to the right, where it can't be seen. Since Bootstrap assigns <code>width: 16.66666667%;</code> to <code>.col-md-2</code>, it seems like I would have to get rid the grid system for the higher level divs, <code>#page-content</code> and <code>#sidebar</code>. But then, how can I make sure <code>#page-conten</code>t fills the remaining space at the left of <code>#sidebar</code>.</p>