Strange positioning behaviour when using pictures and text

jsFiddle

I'm trying to output images and text horizontally. The text elements use the jQuery Cycle Lite Plugin to cycle over a list of words. As you can see in the jsFiddle above, the cycling text elements are on the page, but for some reason the positioning of the elements is messed up. Some of the text elements appear in/on the images, then there are a bunch stacked on top of each other at the end. What is causing this?

I know there are some plugins, like jQuery Masonry, that may be able to automatically position the elements, but I need to maintain the order that the HTML outputs them all. All I really need is to have the text elements interspersed with the pictures so that they are all visible, and not jumbled up and appearing on each other.

Thanks for reading.

EDIT:

HTML

<script src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.lite.1.0.min.js" type="text/javascript"></script>

            <a href="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" rel="temp1"><img  src="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" /></a>
            <span id="a"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span></span>
            <a href="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" rel="temp1"><img src="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" /></a>
            <a href="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" rel="temp1"><img  src="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" /></a>
            <a href="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" rel="temp1"><img  src="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" /></a>
            <a href="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" rel="temp1"><img  src="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" /></a>
            <a href="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" rel="temp1"><img  src="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" /></a>
            <a href="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" rel="temp1"><img  src="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" /></a>
            <span id="b"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span></span>
            <a href="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" rel="temp1"><img  src="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" /></a>
            <a href="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" rel="temp1"><img  src="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" /></a>
            <span id="c"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span></span>
            <a href="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" rel="temp1"><img  src="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" /></a>
            <a href="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" rel="temp1"><img  src="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" /></a>
            <a href="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" rel="temp1"><img  src="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" /></a>
            <a href="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" rel="temp1"><img  src="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" /></a>
            <a href="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" rel="temp1"><img  src="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" /></a>
            <a href="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" rel="temp1"><img  src="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" /></a>
            <span id="d"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span>开发者_开发技巧<span>10</span><span>11</span><span>12</span></span>
            <span id="e"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span></span>
            <span id="f"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span></span>
            <span id="g"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span></span>
            <span id="h"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span></span>
            <span id="i"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span></span>
            <span id="j"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span></span>

Javascript:

$(document).ready(function() {
    $('#a').cycle();
    $('#b').cycle();
    $('#c').cycle();
    $('#d').cycle();
    $('#e').cycle();
    $('#f').cycle();
    $('#g').cycle();
    $('#h').cycle();
    $('#i').cycle();
    $('#j').cycle(); 
});

EDIT 2:

Here is an image representing what I'm trying to do. The blue boxes are the images, and the red ones represent the area that I want the cycling text to appear.

Ok, after your edit, here's a version that does exactly what you want: jsfiddle.net/PcD8n jsfiddle.net/AcPxx

I took the liberty of tinyurl-ifying your images, as they made the code unwieldy. Also, for conciseness, I removed the wrapper <a> tags. You can add them back if you like.

Finally, I removed the ids from the cyclers, as they weren't necessary in the context of the code you gave us.

I suspect that the usage of a <span>, an inline element, is part of the layout issue, as the demo uses a <div>, which is a block-level element.

Further investigation shows that your span[id] elements have no height specified (as they are inline), so are getting an implicit height of 0px. Hence the strange stacking.

Didn't quite understand what you were trying to do
+ your example on jsFiddle is a bit broken here is a more simplified(i hope) version of your markup http://jsfiddle.net/avipinto/F95x3/2/
i put the spans between the images to show the transition between images as you supplied the same image to them all.

if all your problem is the positioning the text below the slideshow then give the container of the images height.
if you want different title to each image - look at the source of the page of the plugin - he uses the following code:

 $('#slideshow3').cycle({
        delay: 2000,
        speed: 500,
        before: onBefore
    });

    function onBefore() {
        $('#title').html(this.alt);
    }

and html:

<div id="slideshow3" class="pics">
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" alt="Panama City" />
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" alt="Heading to the water" />
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" alt="Danny" />
</div>

much more elegant and accessible than spitting spans all over the place

Hope this helps