CSS Help please

[PaulGrimshaw]

Hi,

http://www.anything-goes.co.uk/acata..._liquids.shtml

I am trying to get my products to look good in css, but I am having trouble with my layout. If you look on the above page, there is a gap between some of them.

This is because I have two columns, and each time actinic goes through the product body and does a clear:both before doing the next line.

Is there a way I can get the divs to close up behind each other, other than setting a specific height?

Thanks,
Paul.

[jont]

You can either set heights or ensure you use the same amount of text each time... the div's are collapsing to fit the content correctly .. just as they would if a table.

I would be inclined to have the 1 column and float:left the product div's so they flow a little better and if you have similar box sizes you can place them next to each other and shift the odd longer boxes to the bottom where the base alignment would not be so noticeable

[PaulGrimshaw]

Thanks jont,

I really wanted two columns as some of pages might have a hundred items... I have decided I will specify a height, and let it crop. They can see the rest on the extended size popup.

Thanks,
Paul.

[gabrielcrowe]

no, hec an have his cake and eat it.

try this structure:

<div>
<div>product one</div> act:next
<div>product two</div>
</div>

the outer div, make that span the row. you can do this by replacing the code in the html in options. the onces you probably removed to make your divs left float.

make the prod divs, 100% height. This means that a smaller div will expand to fill the space made by the larger one.

_or_

make the height static.
I know this can be a problem if you ahve text that overflows. but it'll probably work for your products, since there is not very much text in there.