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.
Well, it looks like apple uses Javascript (they also have major classitis in their menu listing).
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).
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.
Apple also has a large gap at the end, but it doesn’t look too bad… I wonder if somehow the floats can be “shrinkwrapped” by that inner box without forcing the floats down…
Yeah, right now I’m using javascript. I won’t serve the scroll to the ones with javascript, but instead have different “pages” that the user can click on which makes the javascript slide the div to another scroll point. So I set overflow:hidden for those with javascript, and overflow:auto for those without. But I wan’t it to work for those without javascript to. And it does, it’s just that I set the container div to 9000px just to make sure it’s wider than it’s contents, and there is unfortunately no way of knowing how wide the contents will be.
So it’s not a bad solution really, everyone can access it without problems, but it irritates me that the users without javascript will get white-space to the right of the products.
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.
