BitWare

PapaGeek

Pet Wellness

CMM Services

How To Fix Social Serurity

This table represents the HTML and CSS coding for all of the text on this page. Change the width of your browser window. As Variable HTML changes the active style sheet, display: none directives hide the pink areas while css float and clear position properties switch the content between one and two columns.

td # ads td # ad sp div # top nav
div # sub nav
td # toc sp td # toc
div # alt ads
div # content
div . two col
div . col 1
div . col 2
td # ads td # ad sp div # top nav
div # sub nav
td # toc sp td # toc
div # alt ads
div # content
div . two col
div . col 1
div . col 2
td # ads td # ad sp div # top nav
div # sub nav
td # toc sp td # toc
div # alt ads
div # content
div . two col
div . col 1
div . col 2
td # ads td # ad sp div # top nav
div # sub nav
td # toc sp td # toc
div # alt ads
div # content
div . two col
div . col 1
div . col 2
td # ads td # ad sp div # top nav
div # sub nav
td # toc sp td # toc
div # alt ads
div # content
div . two col
div . col 1
div . col 2
td # ads td # ad sp div # top nav
div # sub nav
td # toc sp td # toc
div # alt ads
div # content
div . two col
div . col 1       div . col 2
td # ads td # ad sp div # top nav
div # sub nav
td # toc sp td # toc
div # alt ads
div # content
div . two col
div . col 1       div . col 2
td # ads td # ad sp div # top nav
div # sub nav
td # toc sp td # toc
div # alt ads
div # content
div . two col
div . col 1       div . col 2

Your browser window is currently 00 pixels wide. The following CSS directives are controlling the design of the page:

   File: one.css
#ads    {display: none;}
#adsp   {display: none;}
#tocsp  {display: none;}
#toc    {display: none;}
   File: one.css
#ads    {display: none;}
#adsp   {display: none;}
#tocsp  {display: none;}
#toc    {display: none;}
   File: one.css
#ads    {display: none;}
#adsp   {display: none;}
#tocsp  {display: none;}
#toc    {display: none;}
   File: onenav.css
#ads    {display: none;}
#adsp   {display: none;}
#topnav {display: none;}
#subnav {display: none;}
   File: adsonenav.css
#topnav {display: none;}
#subnav {display: none;}
#altads {display: none;}
   File: twonav.css
#ads    {display: none;}
#adsp   {display: none;}
#topnav {display: none;}
#subnav {display: none;}
.col1 {float:left; width:48%;}
.col2 {float:right; width:48%;}
.twocol {clear:both; width:100%;}
   File: adstwonav.css
#altads {display: none;}
#topnav {display: none;}
#subnav {display: none;}
.col1 {float:left; width:48%;}
.col2 {float:right; width:48%;}
.twocol {clear:both; width:100%;}
   File: adstwonav.css
#altads {display: none;}
#topnav {display: none;}
#subnav {display: none;}
.col1 {float:left; width:48%;}
.col2 {float:right; width:48%;}
.twocol {clear:both; width:100%;}
   File: w7.css
#framework {width: 1700px;
            margin-left: auto;
            margin-right: auto;
            align: center;
            }

Variable HTML selected style w7, the widest design, to display the page at this width. Style w7 imports the same adstwonav.css file as style w6 to display advertisements on the left, two columns of content in the center and navigation on the right. Also, since we decided to limit the overall design width of our site to 1700 pixels to avoid extremely long lines for the sake of readability, we have stretched the book design to the edges of the browser window and limited the content area to 1700 pixels centered on the page. NOTE: The CSS file includes both the deprecated align center and the current margins auto method for centering the content so the page will function properly on older and newer browsers. "The nice thing about standards is that you have so many to choose from."

Variable HTML selected style w6 to display the page at this width. Style w6 imports the adstwonav.css file which was designed for larger monitor displays. The browser is wide enough to display advertisements on the left, content in the center and navigation on the right. It is also wide enough to use CSS positioning commands to split the content into two columns.

Variable HTML selected style w5 to display the page at this width. The CSS coding eliminates the separate column for the advertisements and moves them under the navigation. We tested Internet Explorer, Firefox, and Chrome on a 1024 x 768 monitor and the width of each browser window was 1003 pixels plus a vertical scroll bar. Style w5 is supported down to a browser width of 1002 pixels. This is our default design for the less than 5% of visitors who have JavaScript turned off.

Variable HTML selected style w4 to display the page at this width. As the browser width continued to decrease the two columns had the same words per line problem again, but switching to single column made the lines too long for optimum readability so we moved the advertisements back into their own column again.

Variable HTML selected style w3 to display the page at this width. The page is now so narrow that we had to move the advertisements back under the table of content to increase the words per line.

Variable HTML selected style w2 to display the page at this width. The page is now so narrow that we cannot afford a separate column for the navigation so we moved it to the top of the page.

Variable HTML selected style w1 to display the page at this width. As a last ditch effort we made the book design smaller so we could fit more content on each line.

Variable HTML selected style w0 to display the page at this width. OK, we give up! There is nothing left to do. The page is just too small for a book design or anything else. But the page is still readable on an extremely narrow browser window. Can you say that about any of the other website that you have visited!

A-         A+

Table of Content

BitWare

PapaGeek

Pet Wellness

CMM Services

How To Fix Social Serurity

This webpage is also available in a fixed width template.

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