How to make scalable modules in a div element

Question

I'm interested in creating web modules that are encapsulated by a div element in a manner that, by simply resizing the div, everything in that div scales to the dimensions of that div proportionately (fonts, sub-divs, etc.).

A couple of weeks ago, I made this form that scales pretty well as you resize the page. I was able to achieve this by sizing things with the CSS3 viewport relative sizing units.

These viewport units work great if your module is the size of the entire viewport (the size of the whole page), but these same units don't work if your intended "viewport" is going to be just a div that is only one part of an entire web page and a div you intend to reuse in multiple pages with total different "surroundings".

Conceptually, the idea is to be able to create reusable modules that can be placed anywhere inside of any webpage, and by simply setting the modules div container size, all contents scale proportionately based on the size of the div.

I want to create modules that can be consumed by any webmaster, and all the webmaster has to do is set the height, width and location of the module, and the module scales perfectly to the webmaster's desired dimensions.

Any advice toward this concept would be appreciated.

Answer 1

François REMY wrote:

Hi Lonnie,

I think your pain is valid, and important.

You'll be happy to learn that there are currently proposals for "module-like" local viewports similar to what you want. An example (taken at random, of course) would be my own proposal http://fremycompany.com/TR/2012/ED-css-viewport/ (which should probably mention that the "vh" and "vw" units will map to the width/height of the element which is set as a local viewport, for its descendants) but some better articles were also written by people at Google last year about why we want something along those lines.

The issue at this point is also somewhat debated in the Responsive community group in the form of ":min-width/:max-width" for which I believe the requirement and problems to solve are close if not identical to the ones faced by an implementation which would satisfy your needs.

I think it's great you provided a reminder to the css group webdevelopers care enough about the problem to find their way up to here to voice their opinion, this is valuable, so thanks!

Best regards, François

---

Above is a reply received from the w3.org mailing list, to my message below:

---

In CSS, there needs to be a way to specify the specific element you want to base your relative sizing units off of. Relative sizing units shouldn't necessarily be based on a parent element's size, or the page's size, or the viewport. A web module may have numerous child-elements of various depths, and the element you want to base relative sizing units off of might not be an immediate ancestor!

For example, please take a look at the question I posted here: How to make scalable modules in a div element

I like how the viewport units allow you to scale the contents of a page. I made this page, and am happy that even the fonts are scaling well on it: http://www.lonniebest.com/emailform/

However, my ultimate goal is to be able to create composite web-modules (that are encapsulated by one div element, for example) that can be placed onto any web-page in a manner that a webmaster can scale that element's contents just by simply setting the divs height and width. To do this, I really need relative sizing units to be base on a particular element -- the one that encapsulates my entire web-module.

To some degree, this can be achieve with % units, but not for font-size! I have not found a relative font-size unit that can be based on the size of a parent element. If a webmaster put my self-made module onto his page, my font-sizes will be based on this size of his page, and NOT base on the size he decided to set my module.

Viewport units work great if you web-module is the size of the viewport; resizing the window makes even fonts re-size proportionately.

The web is getting very close to offering the same scalable modules of non-web technologies such as QML and WPF.

If CSS could offer a way for a webmaster to "specify a particular element that relative sizing units are to be base on", this seems perfect.

Again, a web module may have numerous child-elements of various depths, and the element you want to base relative sizing units off of might not be an immediate ancestor and it might not be the page as whole. For a web module, you want relative size of fonts and everything else to be based on that module's size (not the page as a whole).

CSS should be so flexible, that I can create an independent module and you can put it onto your page, and by simple setting my modules height, width, and location: everything contained in that module scales proportionately to your environment. If you make the size of my module super small, the fonts should be super small, not based on the page as a whole.

Lonnie Best

Answer 2

1. Set the div's style to position: absolute or position: relative.
2. Set the div's children to position: absolute.
3. Position the children using % dimensions.

Example (http://jsfiddle.net/o697zdeg/):

<div style="position: relative; border: 5px solid red; width: 100px; height: 100px">
    <div style="position: absolute; top: 0; bottom: 0; width: 50%; background-color: blue"></div>
    <div style="position: absolute; top: 0; bottom: 0; width: 50%; right: 0; background-color: green"></div>
</div>