Question

My goal is to generate this:

<div>
   Image (40px by 40px) Caption

   Image (40px by 40px) Caption

   Image (40px by 40px) Caption
</div>

My current code generates images that are wrapped up inside the div with previous list item instead of ones right below the image

my code structure is

<div>
   <ul>
      <li>
         <img/>
         <span>caption</span>
      </li>

      .....
   </ul>
</div>

What CSS do I need so I can avoid doing the wrap that I am seeing?

the css i have righ now for these elements are

li img{
    position:absolute;
    bottom:0;
    display: block;
}
li{
    position:relative;
}

.box (this is for div)
{
    padding: 4px 15px;
    border: 1px solid #ccc;
    margin: 0 0 10px 0;
    border-radius: 15px;
    -moz-border-radius: 15px;

}

Answer 1

Not getting your question properly but if you want that the caption text doesn’t get wrapper than use CSS white-space property so that the text doesn’t get wrapped

.box /* (this is for div) */ {
    padding: 4px 15px;
    border: 1px solid #ccc;
    margin: 0 0 10px 0;
    border-radius: 15px;
    -moz-border-radius: 15px;
    white-space: nowrap;
}