title: Website - overflow a image between 2 divs
body: <p>Im working on a website right now but i have some problems with putting a image on top of 2 divs, and there is a other problem the bottom div is the footer, wich i want to keep stick to the bottom ofcourse (this part works but the image on top of the divs not)</p>
  
  <p>Here is a image to show you my idea better :<img src="https://i.stack.imgur.com/Diaoq.png" alt="enter image description here"></p>
  
  <p>I'd like to know a few ideas of how i can implement this, if you need to see my code ask me.</p>
  
  <p>For the people who commented already under my post,
  first of all thank you for your time but sadly it didnt work (so far i keep trying your suggestions)
  but to help you a bit more to understand what i try to do, i give you a bit of my code.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;style type="text/css"&gt;
  /* general */
   body { background: #fdfdfd; font:  12px Verdana, Geneva, sans-serif;  color:#444;      margin: 0 0 300px; /* bottom = footer height */}
   html { position: relative; min-height: 100%;}
   .fix_width { width: 940px; margin: 0 auto; }
   .fix_width:after, .left_foot_cont ul li:after { content: "  " ; display:block; height:0; clear:both; visibility:hidden; }
  
    #header { background:#6FF; height:100px; z-index: 3; position: relative;  border-top: color: #555555 thick; border-width:5px; }
    #container { position:relative; top:0px;  margin-top:100px;     overflow: auto;}
    .cont {width:250px; padding-left:20px;  margin-left:10px; display:inline-block; float:left;  }
  
    #footer {  background: #A9CF38;       position: absolute;
      left: 0;
      bottom: 0;
      height: 200px;
      width: 100%;
      overflow: auto;}
  
      img {width:940px; }
  
  
   &lt;/style&gt;
  
  
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div id="header"&gt;
          &lt;div class="fix_width"&gt;
  &lt;h2&gt;
  Just the header nothing important
  &lt;/h2&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  
       &lt;div id = "container"&gt;
                      &lt;div class="fix_width"&gt;
                                      &lt;div class="cont"&gt;
                                                 &lt;h2&gt;
                                                              Lorem ipsum
                                                  &lt;/h2&gt;
                                                  &lt;p class="last"&gt;
                                                              Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
                                                  &lt;/p&gt; &lt;!-- End p.last --&gt;
                                      &lt;/div&gt;&lt;!-- End .cont --&gt;
                       &lt;/div&gt; &lt;!-- End .fix_width --&gt;
            &lt;/div&gt;&lt;!-- End .container --&gt;
  
            &lt;!-- Where should i put the image  ????? ---&gt;
            &lt;img src="http://www.mormonshare.com/sites/default/files/handouts/cg_banner-blank.gif"&gt; &lt;/img&gt;
  
  
                 &lt;div id = "footer"&gt;
                      &lt;div class="fix_width"&gt;
  
  
                                          &lt;div class="footer_con_left"&gt;
                                                                &lt;h2&gt;
                                                                       Lorem ipsum
                                                                       &lt;br /&gt;&lt;br /&gt;
                                                              &lt;/h2&gt;
                                                               &lt;h1&gt;
                                                                      dolor sit amet
                                                                      &lt;br /&gt; 
                                                                      dolor sit amet
                                                                      &lt;br  /&gt;
                                                                      dolor sit amet
                                                                      &lt;br /&gt;
                                                                      dolor sit amet      
                                                          &lt;/h1&gt;
                                          &lt;/div&gt;  &lt;!-- End. footer_con_left --&gt;
                          &lt;/div&gt;&lt;!--  Einde class fix_width --&gt;
        &lt;/div&gt; &lt;!-- Einde class footer --&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>As you can see the image in the code, i want this image to be placed 50% on the white space and 50% on the green space (so in the code between the container div and between the footer div, or maybe better to say on top of these divs)</p>
  
  <p>Thanks for helping!</p>