I want #products to have fixed width and height, and to only have a horizontal scroll. The .product-group-divs will be floated left, so my problem is that if I don’t make an extra div inside #products with a huge width, the .product-group-divs are placed below each other. And with this extra div, there will be alot of white-space to the right of the last product-group, since I don’t know how many .product-groups there will be.
What I’m doing is basically something like:
But from what I can tell, they set the container div to a fixed width, probably since they know how many products will be displayed.
I’ve been thinking of trying something like this too-- a box on a page which scrolls horizontally. I think it can be done without JS… or, likely, we’ll have to fake it if we want to keep it CSS-only. There’s also the problem of IE6 expanding widths and heights to accomodate the stuff.
I keep looking at the design at css zen garden (# 058) where the whole page is set horizontally. I think there’s a trick in there…
I wonder if the rules could be broken. Start with a box of a set width and set overflow to auto. Inside is another box with the real width-- something huge. I’m not sure if you can do that, have a box that’s bigger than its container. Usually causes problems. But maybe it can work. The inside box has to be as large as necessary to contain your products-- you’ll have to at least know the most number of products you’ll have. Then you can float each product within. I think.
This would be extremely cool to do with css alone. I think I’ll try it (I’ll also prolly pull all my hair out in frustration in the meantime too).
I suppose you could resort to tables, and having just one long row with lots of TD:s, but it gives me the creeps.
Yeah, exactly like that! But it didn’t work with my layout (or it’s because I don’t really understand how to modify it :)). Each .product inside .product-group:s are floated left. But somehow the float is not accepted. Am I doing it wrong?
You don’t float the main blocks because that’s what the inline-block is for. You can float elements inside each block if needed though.
The way it works is that you use display:inline-block to allow block elements to stack horizontally. Then the white-space:nowrap stops the inline-block elements from wrapping to the next line and gives the horizontal scroll effect.
You can’t do this if you float the elements as white-space:nowrap doesn’t apply to a block element itself.
Of course we have to hack ie which basically means turning the element into an inline element and then giving it haslayout. For gecko we use the -moz-inline-box vendor extension.