Hi,

Wondering if anyone can help me. I'm trying to display 3 CSS boxes in a row, which i've done successfully using CSS here:

My Boxes

However, my code for these boxes is messy, here's a box code:

HTML Code:
<div style="float:left;padding:5px; border: 5px solid #CCC;margin-bottom:10px;width:280px;margin-right:10px;">
  <img src="image2.png">
  <p style="background:#EEE;margin-top:2px">
    <img src="arrow2.jpg" style="margin-right:4px;height:14px;width:14px;padding-top:3px;" />Visit Website
  </p>
</div>
However, i'm trying to do this using less code with list elements, but not getting too far too quickly - anyone please help. Thanks:

HTML Code:
<style type="text/css">
ul#portfolio { margin:0 auto; width:860px; height:570px; }
ul#portfolio li { list-style: none; width: 280px; height:200px; }
ul#portfolio p { width:280px; background: #EEE url('small_arrow.png') no-repeat top; }

li.theimage { border:5px solid #ccc; padding:5px; background: url('image2.png') no-repeat top; }
</style>

<ul id="portfolio">
  <li class="theimage"></li><p>Visit Website</p>
  <li class="theimage"></li><p>Visit Website</p>
</ul>