Question

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.

Answer 1

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/