some trouble with CSS aligning text

[wolf99]

Hi All

im not too experienced with CSS, and have a small prob

I have a floating div that holds a set of images. I want to use the CSS to place a little bit of info about each set of images beside the set then there is anther set further on like-wise.

eg.

DivA
image blahblah blah blah
image blah blahblah
image etc
image

DivB
image blahblah blah blah
image blah blahblah
image etc
image

Ive read so many different and sometimes contradictory methods I am thoroughly confused as to the correct way to do this

thanks for any help

[teknomage1]

I like to use nested lists for this sort of thing.
So you have an unorderd list of unordered lists that each contain an image a desciption and whatever else you want. You can set up the inner list class to render horizontally.

Of course, the more cynical might state that that's a table and you could just make each div contain a table and use the CSS for style not layout (since the data itself is semantically tabular, it shouldn't set off the anti-table nazis).

[wolf99]

hmmm thanks technomage, hadn't event thought of tabular after havinig it beaten in than tables are bad! bad! bad! will try it

[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.

[DJMaze]

Here's another (write-up in 1 minute)

<style>
.image-set fieldset
{
    float:left;
    width:200px;
    height:200px;
}
.image-set fieldset img
{
    float:left;
}
.image-set div
{
     clear:both;
}
<style>

<div class="image-set" id="set-A">
    <fieldset>
        <legend>Image title</legend>
        <img src=""/>
        Image description
        <div></div>
    </fieldset>
    <div></div>
</div>