title: HTML fullscreenlayout with min-width, max-width
body: <p>I have a item (e.g. a div tag, which takes 1/3 of the screen-width and has a minimum width of 500px and a maximum width of 700px. Beside it, there is another item which takes the rest of the screen. If I just assign a width of 66% it works fine as long as the height of the other item does not take one of the max values, at which point an overflow happens or the item just lets space out. </p>
  
  <p>Any ideas who this is done by html without building an overly complex javaScript script?</p>
  
  <p>best Regards, 
  Stefan</p>
  
  <p>Edit Code:
  This sould provide a simple example, As long as the site is under 500px, both are 50% of the screen, but if it gets larger, the right side (marked with world) should fill out more than 50%.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;style type="text/css"&gt;
          * {
              border: 1px solid black;
          }
  
          html,body,.fullheight {
              height: 99%;
              width: 99%;
          }
  
          table {
              table-layout: auto;
          }
          .minfield {
              max-width: 250px;
              border: 1px solid red;
              overflow: hidden;
          }
  
          .leftfloat{
              float: left;
          }
  
          .maxsize{
              height: 99%;
              width: 49%;
          }
      &lt;/style&gt;    
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div class="fullheight"&gt;
          &lt;div class="leftfloat minfield maxsize"&gt;
              &lt;p&gt;hello&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="leftfloat maxsize"&gt;
              &lt;p&gt;world&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p><a href="http://jsfiddle.net/4y937/" rel="nofollow">Demo</a>|<a href="http://fiddle.jshell.net/4y937/show/" rel="nofollow">FullScreen</a></p>