title: CSS: how to position 2 divs (one fixed) next to each other with one div at full width?
body: <p>I want to make a webpage with at the left side a DIV1 (navigation) that is fixed. </p>
  
  <p>The rest of the page should be filled with let's say DIV2. But at the right side I want to have a DIV3 that only shows up on hover. And when it shows up, DIV2 needs to automatticaly change the width to fit between DIV1 and DIV3 and on release. DIV2 needs to fill the page again.</p>
  
  <p>(check image)</p>
  
  <p><a href="http://postimg.org/image/hxt249uqb/" rel="nofollow">image</a></p>
  
  <p>html:</p>
  
  <pre><code>   &lt;div id="DIV1"&gt;
     &lt;img class="logo" src="logo.png"&gt;
  &lt;/div&gt;
  
  &lt;div id="wrapper"&gt;
          &lt;div id="DIV3"&gt;
          &lt;div id="DIV4"&gt;&lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div id="DIV2"&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>#DIV1 {
  position:absolute;
  width:200px;
  }
  
  #wrapper {
  position: absolute;
  left: 200px;
  right: 0px;
  width: auto;
  height: 700px;
  background: red;
  }
  
  #DIV3 {
  right:0px;
  position: absolute;
  width: 300px;
  height: 700px;
  background: yellow;
  display: none;
  z-index: 5;
  
  }
  
  #DIV2 {
  min-width:500px;
  margin-right:0px;
  width: auto;
  height: 600px;
  background: pink;
  }
  
      #DIV4 {
      width:50px;
      height:50px;
  
  }
  
     #DIV4:hover #DIV3 {
     display:block;
  }
  </code></pre>
  
  <p>Any help would be great. Just learning HTML and CSS and don't have a damn clue...</p>