First time poster here. Before you think this is yet another question asking how to do basic centering of something in a DIV, it's not.
Stack Overflow deep-6'd my question based off the word "center" without actually reading it. On the other hand, it's possible I did miss the question being answered somewhere and I wasn't searching with the right keywords.
Original Question:
Quick background - I am a graphic artist that's been tasked with this project, and don't have much experiencing coding. I've gotten to this point through Google-fu and Stack Overflow. I'm open to any solution within reason, so long as I can mostly understand it (lol). CSS, JS, jQuery, whatever. But now I'm stuck and, more worrisome, I'm afraid I've codded myself into a corner.
Problem - As you can see in the linked Fiddle, my tile based "menu" is functioning great EXCEPT that I cannot figure out how to center the tiles' menus (DIV with purple background) relative to the parent of the parent.
That is, I'm trying to make the DIV with class
.tile-menu-container-open
centered to the parent of it's parent, DIV
.tile-collection
.
What I have tried:
This is what I've been able to get thus far:
JS Fiddle
EDIT: You may have to manually press "run" after the page loads to trigger jQuery properly, for some reason.
Note: From what I can tell, I need to keep the menu container DIV where it is in the overall structure so as to maintain the position of the closed tiles, especially when the window resizes.
It sorta works, and resizing the window does make the menu container collapse to smaller sizes ... sorta.
Am I out of luck here?