Topic: Simple Gallery layout question

Hello guys,

I have a straightforward gallery display that includes 5 list items per row, I would like to achieve the following layout



The main point here is that although there is ~10 pixel margin between each item, there is no padding or margin between the outside items and the edge of their container.

I assume I'm going to have to use some kind of collapsing margin, but I'm unfamiliar with how successful those methods can be, perhaps this can be achieved with negative margins?

One addition to the issue is that I cannot have a first and last class associated with items on each row, but I could use alternating styles.

Any tips?

Cheers,

[doh]
Oops, please could a Mad Sci alter the subject to correct the spelling mistake, layour should be layout
[/doh]



(Edited by Blaise on 12-19-2008 10:52)

personally, I'd hack gallery to output appropriate classes for each margin combination.

I realize this won't answer your question, but I have to ask -

1) why not just have the same margins on the outside? to me, that would be more attractive anyway

2) why can't you have first and last classes?

1) the design doesn't actually have a visible border, but the container will be at the extreme width of the layout, and all the space should be utilised, it's a fixed width centred layout (with lots of white-space).

2) the images will be output by a repeating block script, I don't want to throw together a function to arbitrarily add classes to every 1st and 5th element in a row.

I'd set a negative margin left & right on the UL to compensate for the margin applied to ALL the LIs. No additional class is needed, so no need to tweak your code or used a fixed layout.

Yeah I think they are the only way to do this, one thing though, how cross browser friendly are negative margins?

They're fine.

Groovy, thanks chaps!

Post a pic when you get it fleshed out! This post gave me pretty pictures in my head..