title: absolute positioned image in a floated div
body: <p>I have a top bar and the links are set using float.In one of the links i have a floated div.In that div i want to show a absolute positioned image.I am using absolute because i do not want to show the full image only a part of it will be displayed.this is achieved by using top and left as</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>div.cont{
      max-width:50px;
      min-width:50px;
      height:50px;
      overflow:hidden;
  }
  img{
      position:absolute;
      width:100px;
      height:100px;
      top:-10px;
      left:-15px;
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div style="float:right;"&gt;
      &lt;div class="cont"&gt;
          &lt;img src="image url"/&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But as image is absolute positioned it is shown outside that div.</p>
  
  <p>How can overcome this and show the image in div?</p>
  
  <p>Thanks in advance.</p>