Need a little help with CSS!

[techiegirl]

Okay, so I'm trying to align 4 images on my Zen Cart home page. There is one large image to the left and I want the other 3 images to display down the right side.

I'm using the float and clear statements which I thought would do the trick, but does not seem to be working.

The link to my site is: http://www.tregreekboutique.com/zencart.

Any suggestions would be greatly appreciated!!

Here is the code being used:

<STYLE type = "text/css">

img.floatLeft {
float: left;
margin: 0px;
}

img.floatright {
float: right;
clear: both;
}

img.floatRightClear {
float: right;
clear: right;
}
</style>

<img style="width: 660px; height: 550px;
"src="http://tregreekboutique.com/zencart/images/Main_Banner1.JPG" alt="Main Banner" class="floatleft" />

<img style="width: 280px; height: 180px;" src="http://tregreekboutique.com/zencart/images/storefront.JPG" alt="Tre Greek Storefront" class="floatrightclear" /><br>

<img style="width: 280px; height: 180px;" src="http://tregreekboutique.com/zencart/images/event.JPG" alt="Event Flyer" class="floatrightclear" /><br>

<img style="width: 280px; height: 180px;" src="http://tregreekboutique.com/zencart/images/Tre_Bag.JPG" alt="Tre Greek Shopping Bag" class="floatrightclear" />

[niccol]

Well, at the moment you don't seem to have those rules in place.

Actually the only rule you need to get it to work is:

.floatleft{
float:left;
}

the smalled image can be floated right ( or left for that matter) but don't actually need to be. They will stack on top of each other because there is nowhere else for them to go.

Having said that I guess that if someone text-only zooms the page then it work break so it might be better to float the small images too. In which case add this:

.floatrightclear{
float:right;
clear:right;
}

So, basically you were absolutely correct but the stylesheet rules are not being applied to the elements. It looks like the rules just aren't there.

[niccol]

Having looked again.

(You are using style declarations in the actual page. Much better to use the stylesheet but whatever.....)

You have a capitalisation issue. CSS is case specific so you need to get the styles to have the same capitalisation as the rules.

[stevesh]

I would get rid of the embedded styles relating to the images and try something like this in the main stylesheet:

#indexDefaultMainContent img{
float:left;
padding-bottom:.4em;
padding-left:.3em;
}

[niccol]

Hmmm.

I don't actually agree. Both will work so we are just talking about css details so choose the way that you want.

The problem with using #indexDefaultMainContent img is that it doesn't differentiate between the small and large images.

Evidently, you could differentiate between them by using some more advanced css but why bother when adding a class to them is so easy. They are actually different types of element on the page. (I would like them to align differently anyway)

Why do you want to differentiate them? Well, I would want to control the position of them independently of each other. For instance, I would want the right hand side of the small images to align with the right hand side of the containing element. That is just me, but I certainly wouldn't want to only be able to put the same padding in to each image.

On an even more arcane point. Using em is a great idea except when the containing element is defined in px. What that means is that as the page is 'text-only' zoomed there is the potential for the layout to break.

To explain this there are two images and some padding that sit side by side in a container. If you text only zoom then the container will stay the same size. The two images stay the same size but the padding can and will get bigger. Zoom far enough and the images and the padding won't fit in the container any more.

This really is not an issue here. Particularly with the em padding dimensions that have been suggested, but using em inside px defined containers can be fraught with problems that are hard to find until they spring into life at the wrong moment.

But really this is neither here nor there as I am sure that you just want some css that works...