How to make DIV binding to grid via CSS?

Question

I am trying to figure out how to bind DIV columns to some fixed size grid using CSS.

Here's the test page I'm working on: http://mapofemergence.com/test/MoEv2/

What I'm trying to get is the right div (green), somehow tied to the squares of the background grid: when resizing the browser window, the red squares should spread in the middle area, while the green column should “fill in” the remaining area with the right sides of the page and yet always remain aligned (left) with the grid.

In principle, being the square size of the square, the right green div should have a variable width equal to or greater than a, and in any case insignificant than 2a (in this case, it should return to the width of a, another red square coming from the bottom rows to the top).

here is an image to get a better idea:

(sorry my reputation does not allow hyperlink)

I'm not sure that this can be done using CSS, but I'm sure some of you can help find a solution or workaround. I would not use javascript if possible.

Thanks for your help, s

Answer 1

Unfortunately, HTML / CSS does not have the functions necessary to accomplish what you want. You can only achieve this with JavaScript .

You must bind the function to the resize event in the window , which will set the green width of the div to the desired value. In jQuery, it should look something like this:

$(window).resize(function() { $("#rx").width( parseInt($("#rx").css("min-width").slice(0, -2)) + ( ($(window).width() - $("#lx").width() - $("#rx").css("min-width").slice(0, -2)) % $(".module:first").outerWidth(true) ) ); }); 

Please note that this code can be easily optimized, but I wanted to make it as simple as possible.