Question

I am building a comics website, but am having trouble aligning the images the way I want.

I’m going for this:

• I’m trying to get the comics in a row like this (blue)

But all the images are coming out on top of each other:

I thought my CSS was correct…

*{
 margin: 0;
 padding: 0;
 }


 body {
background: gray;
text-align: center;
 }

 #wrapper {
width: 960px;
margin: 0 auto;
text-align: left;
background: white;
 }


 #comics {
/*top, right, bottom, left*/
margin: 50px 100px 50px 100px;
 }

 .comicBG {
position: absolute;
border: 1px dotted black;
background: #99FF33;
padding: 25px;
  }

PHP:

 echo   '<td>';
 echo   '<span class="comicBG"><a href="./templates/viewcomic.php?id=' . $row['imgid'] .  '">
 <img src="' . $thumbpath.$row['imgthumb'] . '"/></a>' . 
 '<br /><a href="./templates/viewcomic.php?id=' . $row['imgid'] .  '">' .     $row['imgtitle'] . '</a></span>';
 echo   '</td>';

Does anyone know the best way to position individual data elements (like the images)?
Should I be using a table, or a list?

Thanks!

Answer 1

I’d use an unordeder list. And you see all the images at the same place because you’ve set their position to absolute and you haven’t set any coordinates.

You can remove position:absolute and the images should be in rows. And if you use an unorderer list, you can float the li’s to the left.