0

I'm setting up a gallery. Images are being placed within a div, adding horizontal scroll if needed.

I want to add a div that contains related info which can be slided from off screen (from right) through clicking a link. I managed to realize this as shown in the fiddle:

http://jsfiddle.net/Philidor/ww34psoL/

However I'm facing a problem. I need the info box to not overlay the images but rather "move them to the left" so that all pictures are completely visible at all times. At the same time the main div ("gallery") has to maintain it's left-margin of 200px at all times. Therefore I can't move "gallery" to the left itself.

I would like to add that I'd prefer to present the images horizontally using...

#gallery {
 white-space:nowrap; }
#gallery img {
 display:inline-block; }

...in order to avoid floating the images and therefore having to set a fixed width for the container. But it seemed this would complicate things even more.

sc0
  • 61
  • 5
  • Inside your `onclick`, add the width of the 'popout' to `#wrapper`'s width, and toggle it so that when it is clicked a second time, the width is removed. – Obsidian Age May 29 '17 at 00:25
  • I thought about that, but i would also have to make the browser scroll along, right? Is this really the simplest option here? – sc0 May 29 '17 at 11:18
  • I managed to find a solution (even with the white-space:nowrap version): https://jsfiddle.net/Philidor/cv0ys06w/3/ – sc0 Jun 02 '17 at 15:28

0 Answers0