title: CSS Caption issue
body: <p>I have a problem with a caption.<br>
  How can I let the caption appear under each photo, when I hover over it.</p>
  
  <p>The problem is that they all appear on one side at the bottom left corner.</p>
  
  <p>Here is the HTML code:</p>
  
  <pre><code>&lt;div id="content2"&gt;
  &lt;ul style="width: 5020px; height: 600px;"&gt;  
  &lt;li class="image" style="width: 392px;"&gt;&lt;img src="images/pr1x.jpg" &gt;&lt;p class="caption"&gt;1st    caption&lt;/p&gt;&lt;/li&gt;
  &lt;li class="image" style="width: 392px;"&gt;&lt;img src="images/pr2x.jpg" &gt;&lt;p class="caption"&gt;2st    caption&lt;/p&gt;&lt;/li&gt;
  &lt;/ul&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Here is the CSS code:</p>
  
  <pre><code>li.image p.caption {
  position:absolute;
  display: none;
  font-size: 28px;
  color: red;
  }
  li.image:hover p.caption {
  display: list-item;
  }​
  #content2{
  width: 150%;
  height: 600px;
  float:left;
  overflow:hidden;
  }
  #content2 p{
  width: 150%;
  }
  .scrollbar-hor{
  background-color: #e5e2de;
  height: 24px;
  width: 150%;
  float:left;             
  }
  .handle-hor{
  height: 25px;
  width: 400px;
  background: url(http://brafitting.info/images/bar.jpg) no-repeat;
  }
  </code></pre>