title: positioning of a span below an image using css
body: <p>I want the <code>byline</code> to appear just below the image.  </p>
  
  <p>I am trying to use the <code>right</code>, <code>left</code>, etc properties in relation to the <code>relative</code> property, but the span moves left of the image.</p>
  
  <p>What is the mistake in my code?  </p>
  
  <pre><code>&lt;section id="manchanabele"&gt;
      &lt;img id="club" alt="club" src="images/club.jpg"&gt;
      &lt;p id="lorem"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  nisi ut aliquip ex ea commodo consequat.
          &lt;span id="byline"&gt;by: Lorem Ipsum&lt;/span&gt;
      &lt;/p&gt;    
  &lt;/section&gt;
  
  section#manchanabele {
      background: #C8C8C8;
  }
  
  #club {
      float: right;
      width: 75px;
      height: 75px;
  }
  
  p#lorem {
      background: #A0A0A0;
  }
  
  span#byline {
      position: relative;
      float: right;
  }
  </code></pre>