A quick demo of how Variable HTML™ works.

The use of tables vs. CSS positioning to construct the page layout is a personal preference. Use whichever you are most comfortable with. Variable HTML™ will work the same way with either design methodology.

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 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.


Insert fixed demo here

W Page
Width
Ads Content S 0 1 2 3
Column
Width
Font and Word Sizez
15 16 18 20
39 41.6 46.8 52
st00 st01 st02 st03
0 Fluid No Variable 1 varies varies varies varies
st10 st11 st12 st13
1 781 No 1 col 621 15.9 14.9 13.3 11.9
2 col 298 7.6 7.2 6.4 5.7
Yes 1 col 461 11.8 11.1 9.9 8.9
2 col 221 5.7 5.3 4.7 4.3
st20 st21 st22 st23
2 972 No 1 col 812 20.8 19.5 17.4 15.6
2 col 389 10.0 9.4 8.3 7.5
Yes 1 col 652 16.7 15.7 13.9 12.5
2 col 312 8.0 7.5 6.7 6.0
st30 st31 st32 st33
3 1220 No 1 col 1060 27.2 25.5 22.6 20.4
2 col 508 13.0 12.2 10.9 9.8
Yes 1 col 900 23.1 21.6 19.2 17.3
2 col 432 11.1 10.4 9.2 8.3
st40 st41 st42 st43
4 1340 No 1 col 1180 30.3 28.4 25.2 22.7
2 col 566 14.5 13.6 12.1 10.9
Yes 1 col 1020 26.2 24.5 21.8 19.6
2 col 489 12.5 11.8 10.4 9.4

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.

Your browser window is currently 00 pixels wide.

W0 W1 W2 W3 W4 W5 W6 All
W0 W1 W2 W3 W4 W5 W6 All
W0 W1 W2 W3 W4 W5 W6 All
W0 W1 W2 W3 W4 W5 W6 All
W0 W1 W2 W3 W4 W5 W6 All
W0 W1 W2 W3 W4 W5 W6 All
W0 W1 W2 W3 W4 W5 W6 All
W0 W1 W2 W3 W4 W5 W6 W7 W8 All
br 00 00 00 00 00 00 0  
table # framework (100%)         td # book top - - - col span = 3
td # book left
- - -
row span = 3
td # banner td # book right
- - -
row span = 3
div # top nav
div # sub nav
div # content
div . two col
div . col 1
div . col 2
td
#
toc
sp
td
#
toc
td # credits
td # book bottom - - - col span = 3
table # framework (100%)         td # book top - - - col span = 3
td # book left
- - -
row span = 3
td # banner td # book right
- - -
row span = 3
div # top nav
div # sub nav
div # content
div . two col
div . col 1
div . col 2
td
#
toc
sp
td
#
toc
td # credits
td # book bottom - - - col span = 3
table # framework (100%)         td # book top - - - col span = 3
td # book left
- - -
row span = 3
td # banner td # book right
- - -
row span = 3
div # top nav
div # sub nav
div # content
div . two col
div . col 1
div . col 2
td
#
toc
sp
td # toc
td # credits
td # book bottom - - - col span = 3
table # framework (100%)         td # book top - - - col span = 3
td # book left
- - -
row span = 3
td # banner td # book right
- - -
row span = 3
div # top nav
div # sub nav
div # content
div . two col
div . col 1
div . col 2
td
#
toc
sp
td # toc
td # credits
td # book bottom - - - col span = 3
table # framework (100%)         td # book top - - - col span = 3
td # book left
- - -
row span = 3
td # banner td # book right
- - -
row span = 3
div # top nav
div # sub nav
div # content
div . two col
div . col 1       div . col 2
td
#
toc
sp
td # toc
td # credits
td # book bottom - - - col span = 3
table # framework (100%)         td # book top - - - col span = 3
td # book left
- - -
row span = 3
td # banner td # book right
- - -
row span = 3
div # top nav
div # sub nav
div # content
div . two col
div . col 1       div . col 2
td
#
toc
sp
td # toc
td # credits
td # book bottom - - - col span = 3
table # framework (1,700 pixels)         td # book top - - - col span = 3 wooden
desk
background
td # book left
- - -
row span = 3
td # banner td # book right
- - -
row span = 3
div # top nav
div # sub nav
div # content
div . two col
div . col 1       div . col 2
td
#
toc
sp
td # toc
td # credits
td # book bottom - - - col span = 3
table # framework (100%)         td # book top - - - col span = 3
td # book left
- - -
row span = 3
td # banner td # book right
- - -
row span = 3
div # top nav
div # sub nav
div # content
div . two col
div . col 1       div . col 2
td
#
toc
sp
td # toc
td # credits
td # book bottom - - - col span = 3

Note that the first two lines of this table are all clickable "JavaScript" links. They do not take you to new pages; they merely communicate with the Variable HTML™ script to interactively change the appearance of this page . . . so, let's play!

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.

All of your changes will remain in effect until you refresh the page.

A-         A+

Table of Content

Variable HTML website, maintained with MySSI    
Copyright © 2012, BitWare Solutions