show/hide content depending on browser width

e.g. amazon.com

[roelp]

On the frontpage of my website i have placed several products stored in a database. The limit is 6 products per category. If i would select more than 6 then the viewport of a visitor with a small browser/resolution will be filled with products, making the page unnecessary long as well.

On the other hand, if i place to little products, then visitors with a large browser/resolution will see to little products and lots of whitespace.

I saw a solution for this problem on Amazon.com. If i would increase the browser width, then the number of shown products would auto-increase to fit the browser size, and vice versa. Checking their CSS didnt help me, cause its quite advanced.

Ive tried looking up tutorials and dreamweaver extensions, but without result. Does anyone know how to make this happen?

thanks

[csuguy]

Using server-side/client-side programming would probably be the most effecient way to do this. However, I think the overflow property maybe of use to you.

You could stick an average amount of products in each category so that it looks good in large resolutions, and then set the overflow to hidden or scroll for the smaller browsers. Combine this with with a layout that expands/contracts based upon the resolution and you should be set. Well - if I understand the problem properly that is.

[Xapti]

You could use percentage based width(/height) container, with overflow:hidden selected.
The only slight issue is that the last displayed product will be cut off partially. Depending on the size of the container (I think small containers with scrollbars don't work/look good), you may just want to overflow:auto, which displays a scrollbar.

I'm not sure about this, but assuming the list is horizontal , if your products are floated (a likely situation unless they are JUST images), then if there's not enough space to fit them all in the width given (percentage based), then the extra ones will wrap to the next line, resulting in them not being cut off, but still not being displayed due to overflow:hidden. This obviously requires a set height for the container.