Question

I’m trying to figure out how to have a DIV column snapping to some fixed-size grid, via 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 (the green one) someway snapping to the background grid quads: when resizing the browser window, the red quads should distribute in the middle area, while the green column should “fill” the remaining area on the right side of the page, and yet remaining always aligned (on the left) with 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 moving from the lower row to the upper one).

here’s an image to get a better idea:

(sorry, my reputation doesn’t allow to hyperlink)

I’m not really sure this can be done via CSS, but I’m sure that some of you can help finding some solution or workaround. I wouldn’t use javascript, if possible.

Thanks for your help,
s

Answer 1

Unfortunately HTML/CSS don’t have features necessary to do what you want. You can only achieve it by using JavaScript.

You should bind a function to window resize event which will set green’s div width to desirable value. In jQuery it should look something like that:

$(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)
        )
    );
});

Note that this code can be easily optimised but I wanted to make it as simple as possible.