Hi,

In a lot of ways divs are starting to feel a lot more natural than tables for layout. As I've been learning more about css, I'm stepping away from Dreamweaver and starting to go over my site page-by-page in a text editor, and fix it up. I'm really shocked at how much code I'm getting rid of, and how a lot of it just doesn't make sense.

My current project is my Rocky Mountains Photo Gallery. I'm still catching up on redoing the images, but already the page is "springy" and finds the best layout for the client's resolution. But the last photo on the page, the panorama ( from Geyser Valley in Yellowstone ), I'm trying to put on its own line. Can anybody tell me what I'm doing wrong? I tried a couple of brs and putting the image in a div with no float.

Even though I added a div around each thumbnail / caption pair, and the imgs are more complex, I got rid of the code below ... on top of making the page work the way I want it to:

            <table border="0">
              <tr>
                <td colspan="3" class="H1"></td>
              </tr>
              <tr>
                <td colspan="3" bgcolor="#000000"/td>
              </tr>
              <!-- repeated 10x for rows of images with captions beneath -->
              <tr>
                <td><div align="center"></div></td>
                <td><div align="center"></div></td>
                <td><div align="center"></div></td>
              </tr>
              <!-- repeated 10x -->
              <tr>
                <td colspan="3"><div align="center"></div>
                    <div align="center"></div>
                  <div align="center"></div></td>
              </tr>
            </table>

The panorama pic is on its own line when I view the page. Do you want more space between it and the othere photos? You could do that by using a margin-top or a padding-top if that's what you mean, instead of the <br>s.

Easy solution
Your .gallerycell is set to float: left. So, the panorama is going where it's supposed to.. next to the floated thumbnail. The added br's are useless in this case.

What you MUST do is CLEAR the float after the last thumbnail, then your panorama will drop down below on it's own 'line'.

Don't use code like <div align="center"> .. bad coding... and should be handled in the CSS

Wow that's a lot of ugly code!!

Why are you using divs inside of td tags? Is that something Dreamweaver wrote for you? Also what's with <td colspan="3" class="H1">?

Thanks, LadynRed! Can I pick your brain a little more? I'm confused in that I'm not applying .galleryCell to the panoramic image, so I wouldn't expect it to float at all? In any case, I just set the div to style="float:none;" and this didn't solve the problem?

I agree align= is to be avoided, but I'm not sure how to set an image's horizontal alignment using CSS?

Learning Newbie, I had created the table in DW, selected all the cells, and clicked center. This is the code DW wrote to implement my idea. This is why I'm starting to do more by hand.

I'm confused in that I'm not applying .galleryCell to the panoramic image, so I wouldn't expect it to float at all?

And it doesn't -- the image next to it does float, and that means it is taken OUT of the normal flow of the document. Anything not floated will wind up where it would given normal flow - or next to the floated image.

You have to CLEAR the float in order to get that panoramic image to sit below the thumbnails.

You need to read up on 'float theory':
http://css-discuss.incutio.com/?page=FloatLayouts

Then read this one:
http://css-discuss.incutio.com/?page=ClearingSpace

Thanks for the excellent reading material! I haven't finished yet, although I've managed to fix my problem already ... I learn best with my hands-on, but I have a lot reading to do. Knowledge is a good thing!