While web-programmers surely know CSS/HTML rules by heart, and web-browsers have algorithms to render web-pages, what interests me whether there are any mathematical/theoretical models or at least formal specification languages for web-page layout (“physics”, “geometry”) allowing to generate bullet-proof html/css given concise specification.

For example, I would like to specify a responsive layout with nested elements (blocks), which behaves in a certain way, say, some stay relative, some flow, some keep height, some keep width, etc. All of this is expressible in CSS/HTML, but the rules are sometimes weird (like having parent/child being absolute/relative to achieve certain effect, e.g. the one here http://css-tricks.com/absolute-positioning-inside-relative-positioning/, which required ah-ha moment).

Also, I think that HTML/CSS is somewhat too verbose and often ambiguous in specifying exact intentions, that makes nearly impossible to “program” web-page and be sure of the result. And even rendering a couple of examples is not enough, because there may occur some unforeseen combination of lengths of texts, which will break the layout.

Somehow I strongly believe, that those relations of nested blocks and elements can be described in a more formal and brief way, with some tool turning the description into HTML/CSS (I am speaking of structural, geometrical relations only, no hope for inline placements). However, so far I have not found any language or manual, which would suggest there is any comprehensible system in how CSS/HTML works. (No doubt though that with demise of IE6 situation improved somewhat).

How to define “physics” / “geometry” of HTML pages to the point where simple set of formulas and constraints can model the resulting web-page?

If the above is still vague, here is a sketch of what I mean by formal spec. Say, I have 4 blocks (A, B, C, D) and I want A, (B and C), D vertically aligned, while B and C side by side and float (other details may be “by default”), so I can write something like:

A / (B, C) / D

And some tool can generate HTML/CSS doing exactly that, under any situations and screen sizes.

Even though it seems like a piece of cake, proven frameworks (like Bootstrap) are needed to be more confident in the result.

Of course, html/css -> that hypothetical modelling language would be a big bonus.

For some analogy – Auckland layout model: http://www.crt.umontreal.ca/~pesant/Constraints/Papers/LutterothSW08.pdf

I would like to point out that I am more interested in an underlying concept, algorithmic approach, rather than specific tool (even though tools are usually made to demonstrate a concept).