title: Border around a <div> element
body: <p>I want to display 3 images in a row (I do not want to use tables since is not tabular data, is just one line with three images...) I have the following HTML which works OK:</p>
  
  <pre><code> &lt;div&gt;
     &lt;span class="step"&gt;&lt;img src="" alt="step one" class="image" &gt;&lt;/span&gt;
     &lt;span class="step"&gt;&lt;img src="" alt="step two" class="image"&gt;&lt;/span&gt;
     &lt;span class="step"&gt;&lt;img src="" alt="step three" class="image"&gt;&lt;/span&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>The problem starts when I add a border to each image (I also included a bit if text to describe what each image is about). I did the following in HTML,</p>
  
  <pre><code> &lt;div&gt;
     &lt;span class="step"&gt;First Step &lt;img src="" alt="step one" class="image" &gt;&lt;/span&gt;
     &lt;span class="step"&gt;Second Step &lt;img src="" alt="step two" class="image"&gt;&lt;/span&gt;
     &lt;span class="step"&gt;Third Step &lt;img src="" alt="step three" class="image"&gt;&lt;/span&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>in CSS,    </p>
  
  <pre><code>.step{
    width:200px;
    height:150px;
    border: 1px solid red;
  }
  </code></pre>
  
  <p>I was expecting to see a box with an image and a text but instead I get a bizarre box around the text only. Any ideas on how to add the border to the span element?</p>