I'm having a problem with aligning my images. I'm using code that allows an enlarged image on hover and I have this working perfectly at
http://hobartkidz.com/parks.htm
but I can't get it the images to align left on this site http://www.test.daretodreamwebdesign.com/about-us.html

I suspect its a float problem and I've tried clearing and floating left etc but no luck.

Does anyone have any idea what I can add to the CSS to fix this?

Probably something really simple I'm missing.

I've sort of got it working by having the image div outside the main one

Try not wrapping your images in a div and let them align naturally using just the img tag. Then you can use <li>classes for your hover effect. Try that.

If you want the images on the left, then the following is based on what you had before you moved the images outside the main div...

You had this styling:


You could either try changing that to this:


Or you can add a new rule:

Thanks Cary,

the second option might work better as I still need the front page image to float right, its just the thumbnail in the gallery that I need on the left.