PapaGeek's Journal

The Variable HTML website uses a pair of nested tables as the backbone of the website design.

The Variable Style website uses a CSS positioning rules as the backbone of the website design.

The following table demonstrates the interaction between the HTML coding and the stylesheets as they are activated by the Variable HTML™ script when you change the width of your browser window.

Note how the #ID directives change portions of the table to red as they are hidden from view while the .class directives change the primary content between one and two columns.

The first line highlights which stylesheet is currently active. The second line tells you the transition points at which Variable HTML™ will automatically change between styles. Click on the different style links and see how the design table and the page itself react. You can also change the actual width of your browser window and the same changes will occur automatically as you cross each transition point.

The second line of links will allow you to modify the internal breakpoint. Just click on any breakpoint and it will change to the width displayed above the table as long as that change does not change the numeric order of the breakpoints. In other words, you can’t set the breakpoint to 600, 900, 800, because the 900 and 800 are out of numeric order. You can turn off a style by changing both breakpoints under that style to the same value.