I'm trying to line up horizontally four images with a small text link underneath them. I can't get the text to go underneath. How can I do this? My code so far:

.cards { top: 5px; background: #66AAFF; height: 124px; width: 537px; position: absolute;}
.cards ul { margin: 0; padding 0; list-style-type: none; }
.cards ul li { width: 103px; display: inline; }
<div class="cards">
<ul id="list">
<li><a href="layout.php"><img src="card.png" border="0" /></a>Cards</li>
<li><a href="layout.php"><img src="card.png" border="0" /></a>Cards</li>
<li><a href="layout.php"><img src="card.png" border="0" /></a>Cards</li> 
<li><a href="layout.php"><img src="card.png" border="0" /></a>Cards</li>
</ul>
</div>

duno why my response didnt show up wrap cards in <p class="imgtxt">Cards</p>

p.imgtxt {
margin:0;
padding:0;
width:103px;
text-align:center; /* optional */
}
.cards ul li { width: 103px; display: inline; }
to
.cards ul li { width: 103px; float:left; }

after the </ul> add <div class="clear"></div>

.clear { clear:both; }

to clear out the float left so you can put stuff below

Here's what you need. I've added some span elements to control the portion of the text. Hope this will help you up. Enjoy

<html>
<head>
<title></title>
<style type="text/css">
.cards {
      width: 537px;
      height: 140px;
      float: left;
      margin: 0;
      padding: 0;
      background: #66AAFF;
      overflow: hidden;
}    
.cards ul {
      list-style-type: none;
/* line-height uses the total height of "cards" class */
      line-height: 140px;
      float: left;
      width: 534px;
      margin: 0;
      padding: 0;      
}
.cards li {
      width: auto;
      line-height: 140px;
      float: left;
      margin: 5px 0 5px 0;
      padding: 0;
      display: inline;
}
.cards span { 
      float: left;
      clear: both;
      text-align: left;
      line-height: 36px;
      margin: 0;

/* Base on 100pixel width image, get the half of it to center your text. So it wil take 50px to the padding to center the text! You may adjust the pixel rate to any desired amount base on the width of your image. */

      padding: 0 50px;
}

.cards li img {
      margin: 0;
      padding: 0 5px;
      border: none;
      width: auto;
      height: auto;
}
</style>
</head>
<body>
<div class="cards"> <ul id="list"> <li><a href="layout.php"><img src="images/type_red1.jpg" border="0" /></a><span>Cards</span></li> <li><a href="layout.php"><img src="images/type_red1.jpg" border="0" /></a><span>Cards</span></li> <li><a href="layout.php"><img src="images/type_red1.jpg" border="0" /></a><span>Cards</span></li></ul>  </div>
</body>
</html>