title: Stop Image from re sizing containing DIV
body: <p>I am working on a site that uses the 960 grid system. It has an issue with the navigation. Rather then try to explain, I'll show you a picture of what I'm going for</p>
  
  <p><img src="https://i.stack.imgur.com/5Ps3c.jpg" alt="enter image description here">
  I figured the best way to do this would be to have a DIV called navHolder that stretches the whole way across the screen. Inside navHolder is a div with a class of container the hold it in the 960 system. I would give navHolder a top and bottom border to achieve the effect. </p>
  
  <p>Here is the HTML</p>
  
  <pre><code>&lt;div id="navHolder"&gt;
      &lt;div class="container_12"&gt;
          &lt;div class="grid_4" id="leftNav"&gt;
              &lt;ul class="leftNav"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;About Us&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;ABG Way&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;div class="grid_4" id="logo"&gt;
              &lt;img src="images/abg_website_logo_2014.jpg" alt="abgLogo" id="mainLogo"/&gt;
          &lt;/div&gt;
          &lt;div class="grid_4" id="rightNav"&gt;
              &lt;ul class="rightNav"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Portfolio&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Media&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;div class="clear"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The issue is that the image forces navHolder to become large, so the top and bottom border lose the desired effect. </p>
  
  <p>Here is a screenshot of the image making it too large</p>
  
  <p><a href="https://i.stack.imgur.com/ykejy.jpg" rel="nofollow noreferrer">Screenshot</a></p>
  
  <p><img src="https://i.stack.imgur.com/Cz1DY.jpg" alt="enter image description here"></p>
  
  <p>I attempted to give the image an </p>
  
  <pre><code>position:absolute
  </code></pre>
  
  <p>to stop it from resizing the div. This works, however, this causes the navigation options to collapse behind it. 
  Here is a screenshot</p>
  
  <p><img src="https://i.stack.imgur.com/ykejy.jpg" alt="enter image description here"></p>
  
  <p>I attempted to create a fiddle to recreate this scenario </p>
  
  <p><a href="http://jsfiddle.net/bCzK5/3/" rel="nofollow noreferrer">Fiddle</a></p>
  
  <p>But its not quite the same. </p>
  
  <p>My question is then, is there a way to set this image so that it doesnt resize its containing DIV AND still holds its place with the navigation so its on both sides of the image? Is there a better way to go about this then what I am currently doing?</p>