Buttons & Menu Colors Create & Check Mailto A Pure CSS3 Slideshow Animations Encoding Fonts & Styles Footer Always Bottom Gradient Backgrounds Resizable Videos Horizontal Slide Show Resizable Slideshow JS Background Slideshow JS Slideshow, Vertical Menu JS Slideshow, Horizontal Menu Simple Canvas Code Editor Simple SVG Code Editor Unicode & HTML Code Universal Page Template jQuery Slide Show Some Paradigms of the Internet


HTML5, CSS, Javascript - Web Page Template

Web Page Template automatically reconstructs sites for all screen resolutions without using subdomains or media specific stylesheets

One Web: "Making two or even three mediocre sites, designing and user-testing them, then trying to keep them in sync is a waste of time and money. Concentrate on preserving the 'One Web': that is, make one really good site that works across all devices".  Bruce Lawson

How to make a site work well on all devices with Internet access? Here's one possible solution to this difficult problem. This Web page template automatically reconstructs sites for all screens without subdomains or media specific stylesheets. It works properly for mobile devices with screen widths of only 240 pixels to the resolutions present on all desktop displays using universally available features. We are going use accessible to all browsers CSS float Property. Unfortunately CSS float has disadvantages that shoud be fixed on the fly with a short script:

Page with standard CSS float Property. Free space in the browser window is not used:



TAMPLATE Page. Blocks occupy 100% of the browser window:




On the proposed template pages use simple scripts (jQuery is not used, unpacked JavaScript source code size is less than 1.5kb) that control the coating process to release a screen space by increasing to 100% of the width of the blocks. Also scripts carry out events handling resize the browser window and Refresh.


Open Demo Page and Save Example