title: CSS min-width property is not functioning
body: <p>I have following problem:<br>
  I have div containing other elements and I try to make its width dependent from the content. I also restrict maximum width of this div. I use <code>min-width</code> and <code>max-width</code> in CSS, but it seems that <code>min-width</code> is not working. The width of div is always the <code>max-width</code> value, no matter what the content is.  </p>
  
  <p><strong>Example:</strong> </p>
  
  <p>I'd like to have the white div (that is main div, I was talking about) strictly around the form that is in it, without empty spaces on the left and right side. I gave the form style <code>max-width:500px</code> to show that even if content is small, the main div stays the same.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="gInnerBox sInnerBoxMain"&gt;
      &lt;form style="max-width:500px; margin-left: auto; margin-right: auto"&gt;            
          &lt;div id='content'&gt;
                     &lt;!-- CONTENT --&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.gInnerBox{
      position: relative;
      background-color: #fff;
      opacity: 0.9;
      padding: 10px 10px 10px 10px;    
  
      box-shadow: -5px -5px 20px #000, 5px 5px 20px #000;
      -moz-box-shadow: -5px -5px 20px #000, 5px 5px 20px #000;
      -webkit-box-shadow: -5px -5px 20px #000, 5px 5px 20px #000;
  
      border: 1px solid #000;
      border-radius: 20px;
      -moz-border-radius: 20px;
      -webkit-border-radius: 20px;
  }
  
  .sInnerBoxMain{
      max-width: 1000px;
      min-width: 500px;
      margin-left: auto;
      margin-right: auto;
      top: 50px;
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/noLll.png" rel="noreferrer"><img src="https://i.stack.imgur.com/noLll.png" alt="Example"></a><br>
  <sub>(source: <a href="http://wstaw.org/m/2011/11/25/ttt.png" rel="noreferrer">wstaw.org</a>)</sub>  </p>