title: CSS - Dynamic Div minimum / maximum position
body: <p>I have a div containing the website logo, that I stuck in the top left corner of my website.
  In order to have it dynamic, I put its position on a 10% screenwidth from the left. Now the problem occurs when the browser gets smaller than the width of my content, it obscures important buttons or text on the website.</p>
  
  <p>I cant seem to figure out how to resolve this and any input would be great.
  Edit: added additional divs to contain both the Logo banner and the Login-menu above the website;</p>
  
  <p>Header.php:</p>
  
  <pre><code>    &lt;div id="navcontainer" class="navcontainer-div"&gt;
        &lt;div id="bannier" class="bannier-div"&gt;
           &lt;a href="http://webstore.thelifeforge.nl"&gt;&lt;img src='/img/banner.png'&gt;&lt;/a&gt;
        &lt;/div&gt; 
        &lt;div id="navigation" class="navigation-div"&gt;
           &lt;table width='100%'&gt;menu content&lt;/table&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Style.css:</p>
  
  <pre><code>.navcontainer-div
  {
      margin-left:-10px;
      max-width: 100%;
      width:100%;
      /*height: 125px; 
      background-color: #AEB861;*/
      background-image: url('/img/header_bg.png');
      background-repeat: repeat-x;
      display:block;  
      border-radius: 3px;
      top:0;
      position: fixed;
  }
  
  .navigation-div
  {
      z-index: 2;
      max-width:1000px;
      height:60px;
      background-color: #E4EEB9;
      margin: 0 auto;
      color: #000;
      border-radius: 3px;
  }
  
  .bannier-div
  {
      z-index: 3;
      left:10%;
      position: fixed;
      width:100%;
      max-width:150px;
  }
  </code></pre>