<div class="box"
  <img src="images/photo.jpg" alt="">
  <p>Caption for the photo</p>
</div>

div.box {width:100px; margin:10px 10px 10px 0; display:inline; }
div.box img {display:block; margin: 0 auto;}
div.box p {margin: 10px;text-align:center;}

<div class="box last"
  <img src="images/photo.jpg" alt="">
  <p>Caption for the photo</p>
</div>

div.last {margin-right:0;}

quote:

ORIGINAL: Tailslide

You want to have a div with a photo and a sentence under it then reuse as necessary.

I'm on the mac so I don't know the measurements so you'll need to change those to the appropriate amount.

Make sure you've got a full valid DOCTYPE otherwise browsers will b e in quirks mode and won't be reliable.

<div class="box"
  <img src="images/photo.jpg" alt="">
  <p>Caption for the photo</p>
</div>

div.box {width:100px; margin:10px 10px 10px 0; display:inline; }
div.box img {display:block; margin: 0 auto;}
div.box p {margin: 10px;text-align:center;}

The display:inline bit is to counter an IE bug which doubles the margin width.

If you want the rar right hand box to have no right hand margin then you'd add a class to that final box to remove the right hand margin.

<div class="box last"
  <img src="images/photo.jpg" alt="">
  <p>Caption for the photo</p>
</div>

div.last {margin-right:0;}

That removes just the right hand margin for the right hand box - all other rules apply from the class box.

quote:

div.box {width:100px; margin:10px 10px 10px 0; display:inline; } div.box img {display:block; margin: 0 auto;} div.box p {margin: 10px;text-align:center;}

<div class="disco">
<img src="/discography/noimage.jpg" alt="Tha Carter IV" border="1" />
<p>Tha Carter IV<br /><small><font color="blue">TBA</font></small></p>
</div>
<div class="disco">
<img src="/discography/noimage.jpg" alt="Tha Carter III: Rebirth" border="1" />
<p>Rebirth<br /><small><font color="blue">TBA</font></small></p>
</div>

<br />

<div class="disco">
<img src="/discography/thecarter3.jpg" alt="Tha Carter III" border="1" />
<p>Tha Carter III</p>
</div>
<div class="disco">
<img src="/discography/thecarter2.jpg" alt="Tha Carter II" border="1" />
<p>Tha Carter II</p>
</div>
<div class="disco">
<img src="/discography/thecarter.jpg" alt="Tha Carter" border="1" />
<p>Tha Carter</p>
</div>

quote:

Hey, thanks for the reply mate

quote:

ORIGINAL: Tailslide

Ok - I've done a test page for you. All I've corrected is the stuff directly concerned with what we're doing.

TEST PAGE

I'd had to remove your scripting as it was crashing my FTP for some reason.

What I've done:

1. add a min-height to the .disco rule. This ensures that everything should float nicely under the row above.
2. Added clear:both to the paragraph underneath to clear the boxes.
3. Changed the H1s to H3s (you should only have 1 H1 on a page) and added clear:both to it.
4. Got rid of all the nasty font tags - no reason other than you don't need that rubbish!

That's about it.

Should work.

quote:

ORIGINAL: jaybee

quote:

Hey, thanks for the reply mate

Psssst...

Tailslide is a Matess

quote:

ORIGINAL: Tailslide

Yep spans are better. If you can do without anything then that's great (e.g. if it's a paragraph within the div then you can set up a rule that singles out all paragraphs within a div called whatever). But if not then spans are better.

You can't easily have two on the top row and three beneath unless you add in a break. They will float next to each other naturally until they run out of space when they'll go down to the next line.

quote:

ORIGINAL: Tailslide

You can have three and two - you'll just need to have a break between the two rows.

Do you mean having the photos in the centre of each div? (add margins to each side is the easiest) or do you mean centering the divs themselves? That's harder - real pain if you have three and two. I'd have a wrapper div around each row, work out the margins exactly and then set a width for the wrapper div and center that.