title: Layout using percentages, but with minimum and maximum widths for sidebars, etc
body: <p>I am trying to figure out how to make a layout, where there's a <strong>Main</strong> area, containing the core content of the page, and a <strong>Sidebar</strong>, containing areas for navigation, searching, and more. See illustration below.</p>
  
  <p><img src="https://i.stack.imgur.com/hXB4x.jpg" alt="layout-sidebar-width-min-width-max-width"></p>
  
  <p>I am using Bootstrap 3.3.1 (<a href="http://getbootstrap.com/" rel="nofollow noreferrer">http://getbootstrap.com/</a>) with a custom theme. The design is fully responsive on most pages, with a few exceptions. On smartphones and small screen devices, where space is scarce, the sidebar will collapse into an expandable menu, but that is not a concern here.</p>
  
  <p>My ambition is:</p>
  
  <ul>
  <li>The width of the <strong>Main</strong> area should adjust automatically, i.e. with screen zoom and re-sizing. Though, with <code>min-width: 320px</code>.</li>
  <li>The width of the <strong>Sidebar</strong> should be <code>width: 18%</code>, though, with <code>min-width: 300px;</code> and <code>max-width: 420px;</code>.</li>
  </ul>
  
  <p>So far, I have tried obtaining this result using pure <code>div</code> tags, but nothing fulfills my demands.</p>
  
  <ul>
  <li><strong>Floating divs:</strong> I attempted using floating <code>div</code> tags for the <strong>sidebar</strong> and margin on the <strong>main</strong> element (see: <a href="http://jsfiddle.net/euxc0593/1/" rel="nofollow noreferrer">http://jsfiddle.net/euxc0593/1/</a>). However, this turned out not to be viable, since a <code>clear: both</code> inside one of the divs would also clear both sides outside the element, <em>unless</em> <code>overflow: hidden</code> is specified. However, <code>overflow: hidden</code> on said <code>div</code> tags is an unacceptable limitation, since it will cut off e.g. <code>box-shadow</code>, borders, and custom tooltips contained within the <code>div</code>. Also, my personal preference and experience is that <code>float</code> is evil, except when used on images to wrap text nicely around them. Of course this is diligently used by various Grid Systems (e.g. Bootstrap's and <a href="http://960.gs/" rel="nofollow noreferrer">http://960.gs/</a>), but those are commonly made for static-width websites and clearly show their weaknesses when used for fully responsive designs with the tiniest twists. It's an "either/or" predicament.</li>
  <li><strong>inline-block</strong>: I also attempted using <code>display: inline-block</code>. However, this is also full of small annoying quirks. E.g. an <code>inline-block</code> will technically be considered text, and so there is spacing between the blocks like there would be between text characters (see: <a href="http://jsfiddle.net/utxvkwtc/1/" rel="nofollow noreferrer">http://jsfiddle.net/utxvkwtc/1/</a>). To fix this, the parent element must have <code>font-size: 0;</code> specified. However, then <code>font-size</code> must be re-specified on the <code>inline-block</code> elements. But now the inheritance of the <code>font-size</code> from <code>body</code> is broken, which is undesirable (see: <a href="http://jsfiddle.net/cnqegdxx/2/" rel="nofollow noreferrer">http://jsfiddle.net/cnqegdxx/2/</a>). Also, we cannot specify <code>min-width</code> or <code>max-width</code> on these elements, as that will cause the elements to sometimes appear in incorrect positions, e.g. on new lines.</li>
  <li><strong>Absolute/realtive positioning</strong>: Another attempt was using <code>position: relative</code> and <code>position: absolute</code>. However, that - again - is not desireable since I don't want other elements to necessarily be positioned relative to the parent, e.g the <strong>Sidebar</strong>.</li>
  </ul>
  
  <p>And so, I have now ended up at a point where I've started using <code>table</code>. I'm not proud of it, but it seems it is the only viable solution, since flex boxes are not yet fully supported - or even working correctly - in many browsers (Say "Hi," Opera and Safari).</p>
  
  <p>Going back to the illustration and ambitions listed above. If using a <code>table</code>, how may this be done so that the default <code>width: 18%</code> is respected as well as the <code>min-width: 300px;</code> and <code>max-width: 420px;</code>?</p>
  
  <ul>
  <li>My attempt: <a href="http://jsfiddle.net/Lx1q8oxh/1/" rel="nofollow noreferrer">http://jsfiddle.net/Lx1q8oxh/1/</a> (values are changed slightly to fit better inside the JSFiddle window)</li>
  </ul>
  
  <p>The <code>max-width</code> is not being respected by the <code>td.sidebar</code>, since this property won't work unless the table is <code>table-layout: fixed</code>;</p>
  
  <p>If you have an awesome solution I am very interested! Especially if you can achieve this using <code>div</code> tags, without introducing Javascript code! :)</p>
  
  <p>Thanks in advance.</p>
  
  <p><strong>TL;DR:</strong> I want a sidebar in a layout, which has a percentage width, but within a <code>min-width</code> and <code>max-width</code> in pixels.</p>