Member Avatar for isotope

Hi everybody,
there's something I'm struggling with since a few days but I didn't get to any point. Actually I'm not really sure that what I would can be done via CSS, but I'm sure that some of you (surely with a greater experience than mine) can help me have a clearer idea and find some smart solution/workaround.

Here's a test page I'm working on:

http://mapofemergence.com/test/MoEv2/

what I would achieve is having the right div (the green one) someway snapping to the background grid, that is:
when resizing the browser window, I would have the red quads to self organize in the middle area (which I achieved, already) and the green area "filling" the rest of the right side of the page, according to the grid.

Basically, being "a" the grid's quad size, the right green div should have a variable width, equal to or greater than "a", and anyway minor than 2a (in which case it should set back to a width of "a", while having one more red quad move adding to the row).

I'm wondering if it is something which can be achieved with CSS or I necessarily need to use javascript (which would be ennoying as the refresh rate would be slow and flickering, much more than a pure CSS solution).

Thanks for your help,
s

  • 1 Contributor
  • 1 Reply
  • 78 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by isotope
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.