[sde]

i've been working on css a lot more lately. picked up a book called transcending css, i highly recommend it.

anyway, i decided to give this a shot tonight, here's what i came up with:

<style>
/* clear unordered list style */
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* define image set div css */
div.image-set {
  width: 250px;
  float: left;
}

/* define h2 style of image set */
div.image-set h2 {
  font-size: 1.1em;
  font-weight: bold;
}

/* define paragraph style of image set */
div.image-set p {
  font-size: .9em;
}

/* set your list element style */
div.image-set li {
	clear:both; /* adds clear because images inside these are floated left */
}

/* set your image-set images to float left with a margin */
div.image-set ul li img {
  float: left;
  margin: 5px;
}

/* set paragraph style of the text inside each list element */
div.image-set ul li p {
  padding-top: 5px;
}

/* clears floats so rest of html content can be displayed right */
.clearfix {
  clear:both;
  height: 0px;
}
</style>

<div class="image-set" id="set-A">
  <h2>Set Title Foo</h2>
  <p>Here is some info about this set.</p>

  <ul>
    <li><img src="/images/.../foo1.jpg" title="Foo1" alt="Foo1" width="50" height="50" /> <p>info about this image...</p></li>
    <li><img src="/images/.../foo2.jpg" title="Foo2" alt="Foo2" width="50" height="50" /> <p>info about this image...</p></li>
    <li><img src="/images/.../foo3.jpg" title="Foo3" alt="Foo3" width="50" height="50" /> <p>info about this image...</p></li>
    <li><img src="/images/.../foo4.jpg" title="Foo4" alt="Foo4" width="50" height="50" /> <p>info about this image...</p></li>
    <li><img src="/images/.../foo5.jpg" title="Foo5" alt="Foo5" width="50" height="50" /> <p>info about this image...</p></li>
  </ul>
</div>

<div class="image-set" id="set-B">
  <h2>Set Title Bar</h2>
  <p>Here is some info about this set.</p>

  <ul>
    <li><img src="/images/.../bar1.jpg" title="Bar1" alt="Bar1" width="50" height="50" /> <p>info about this image...</p></li>
    <li><img src="/images/.../bar2.jpg" title="Bar2" alt="Bar2" width="50" height="50" /> <p>info about this image...</p></li>
    <li><img src="/images/.../bar3.jpg" title="Bar3" alt="Bar3" width="50" height="50" /> <p>info about this image...</p></li>
    <li><img src="/images/.../bar4.jpg" title="Bar4" alt="Bar4" width="50" height="50" /> <p>info about this image...</p></li>
    <li><img src="/images/.../bar5.jpg" title="Bar5" alt="Bar5" width="50" height="50" /> <p>info about this image...</p></li>
  </ul>
</div>

<!-- clear your floats so they don't screw up html beyond this -->
<div class="clearfix"></div>

there should be a css element in the style area for most things you need to customize.