文本导致CSS放置问题

I have a comics website and would like to place text (database field "description") under each comic thumbnail.

I have 2 questions:

Question 1) I'm not sure why, but when I place text under a comic, it forces the comic row below it to offset by one.

But otherwise, without text... it lines up fine:

The CSS is as follows:

    .comics {
    float: left;
    padding: 15px 5px 30px 15px;
    margin: 10px;
    background: url(images/SiteDesign/comicbg.png) no-repeat 0 0;

    /*Need to set width on this >= to thumber width so description text will wrap*/
    width: 220px;
    font-family: "Trebuchet MS", Helvetica, sans-serif;

}

PHP:

    echo '<li>';
    echo    '<span class="comics"><a href=".?action=viewimage&site='.$site. '&id=' . $row['id'] .'">
            <img src="./scripts/thumber.php?img=.' . $thumbpath.$row['thumb'] . '&mw=220&mh=220"/></a>' . 
            '<br /><br /> ' . $row['description'] . '</span>';                              
echo '</li>';

I feel like I'm doing the CSS correctly, so not sure why it's offsetting.

Question 2)

The only reason I'm adding text at the bottom is because Go Daddy says I do not have enough occurences of key words, such as "comics", or "artwork" on my pages for SEO. If I add this text, often including keywords, would that improve my SEO?

Thanks!

EDIT -----

If I do display: inline-block; and verticle-align: text-top; for li, do I need text for each post? otherwise it seems to awkwardly push up one of the images.

If you can't guarantee that each element will have the same height, you want display: inline-block, not float. Also, it should be on the li.

li {
  display: inline-block;
  vertical-align: text-top;
}

You can stuff whatever you want within the li and each row will line up across the top. Demo (using divs): http://jsfiddle.net/ffr3M/

If you add the same amount of text below every comic I bet it will all flow correctly. You could try inserting a div with a fixed height around every description, e.g.:

<div style="height:50px;">' . $row['description'] . '</div>

although you may wish to change your other wrapping spans to divs as well...

You can try having distinctly separate rows that won't affect how the rows below float. You can accomplish this by adding the following after each row's set of comic thumbnails:

<div style="clear:both;"></div>

see this working example: http://jsfiddle.net/gLMw9/