I have this page which lists products. Each product is a div with 250px width and they are all floating left. So depending on the user's browser width, they see 3, 4, 5 ... products per row. If they resize their browser, the items in each row get less or more depending on the size. That is how float acts naturally.
So the problem I have is that in each row, there's a space at the right smaller than the item box side (250px) because no item could fit. I want to center the whole menu (row) so that this space gets split in half and goes on both sides.
If I specify fix width for menu (row), I can center it with margin: auto, but then I'll limit users with other browser sizes to see fix number of items per row. So a user who could see 5 items per row, would be forced to see 3 items and huge space on sides.
Any solution for me?