title: css: Image is on the border of parent's div. How to make text above that image in a div?
body: <p>I have a div with a thick border of 10 px. Inside the div there is a pic and some text.
  <strong>The pic is slightly moved on the border (is a must, should be above the border)</strong>. </p>
  
  <pre><code>&lt;style&gt;
  #main
  {
      border:10px solid red;
      width:400px;
  }
  .img-to-border
  {
      margin-left:-10px;
      margin-top:-10px;
      position:relative;
      float:left;
  }
  .text{
      border:1px solid blue;
      text-align:right;
      padding-right:30px;
  }
  &lt;/style&gt;
  
      &lt;div id="main"&gt;
          &lt;img src="https://www.google.by/logos/2012/slalom_canoe-2012-sr.png" alt="" class="img-to-border"&gt;
          &lt;p class="text"&gt;DCBA padding-right of text is always 30px &lt;/p&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Here is a working code:
  <a href="http://jsfiddle.net/85Zk5/" rel="nofollow">jsFiddle</a>
  The problem is if text is one to four symbols longer, it falls down. But, I want it go above the image (above I mean z-indexed, not from uppper side of the screen to the lower side of the screen).
  P.S. The padding-right is always 30px. 
  So, it goes absolutely the same way like you type numbers on the calculator - from right to the left and above the image, in one line. How to do that for my example?</p>
  
  <p>Again, sorry I repeat that, <strong>The pic is slightly moved on the border (is a must, should be above the border)</strong>. </p>