CSS: z-index whilst using float: left in image gallery

jamesddantony

New Member
I have an image gallery with randomly generated content: The CSS positioning these images is: \[code\].item { width: 200px; margin: 10px; float: left;}\[/code\]I have some JQuery that randomly selects one of these images in the gallery and doubles its length by using .addClass and following CSS:\[code\].frontpageimagelong { height: 200px; width: 420px;}\[/code\]Trouble is the longer image gets tucked under the following image. I need to have it cover or appear above the following image. I thought about using Z-Index as such: \[code\].item { width: 200px; margin: 10px; float: left; position: relative; z-index: 1;}.frontpageimagelong {height: 200px;width: 420px;position: relative;z-index: 99;}\[/code\]But this did not change anything. Does anyone have any suggestions on a good way to go about this? ThanksEDIT: added image of issue:
8yfqp.gif
 
Back
Top