I\'m interested in creating web modules that are encapsulated by a div element i

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.

Explanation / Answer

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

<div>
<div></div>
<div></div>
</div>

Related Questions

Navigate

• Browse (All)
• Browse I
• Subjects

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.