Agile book depot question

I have been working on implementing a variant of the depot example as a
method of learning rails. I have come up against a css question that is
driving me nuts. This may not be the right forum to ask this question.
If
anyone would like to refer me to another place to ask, I would be
grateful.

Most of the code that I am working on is straight from the examples,
with
minor alterations. What is driving me crazy is:

.separator {
clear: both;
}

This is used between each product listing on the index page. What
happens
to me is that the clear clears past not only the particular product
listing
(with photo, etc) but also past the entire left side menu div. So, my
product listing starts halfway down the page.

It is as if the clear is not being restrained to the div that contains
it,
but it is acting on a larger scale. I don’t know if I am
misunderstanding
something, or have a type, or if this is some kind of weird css thing.
I
see this behavior in both the current safari and Firefox mac browsers.

Below is a bit of pseudo html, so you can see how it is used. I’d
appreciate any advice - I am stumped…

Shelby

this is the layout template…