gabarit 2 colonnes / pied scotché coulissant

dabblet.css

/* gabarit  2 colonnes / pied scotché coulissant */

html, body {height:100%;padding:0;margin:0;background:black;}
#page {min-height:100%;width:900px;background:#FFF9D9;margin:0 auto;position:relative;}
header  {border-bottom:solid;background:#cde;margin:0;}
header h1 , header p {margin:0;display:inline-block;vertical-align:middle;}
header h1 img {vertical-align:top;}
#page {
/* on place une image pour simuler deux colonnes sur toute la hauteur , 
elle sera caché par l'entete et le pied
VOIR: http://www.pompage.net/traduction/colonnesfactices */
background:url(http://dummyimage.com/3x1/000/000000) repeat-y 200px #FFF9D9;}
nav {float:left;width:200px;}
nav a , nav h2{display:block;padding:5px;border-bottom:solid;text-align:center;margin:0;}
#page section {overflow:hidden;padding:0 5px;}
.push {height:103px;clear:both;/* degage la place pour le pied */}
footer {position:absolute;bottom:0;left:0;width:100%;height:100px;
border-top:solid;background:#FFF9D9;text-align:center;line-height:100px;}

dabblet.html

<div id="page">
            <header>
            	<h1><img src="http://dummyimage.com/300x200/159/def&text=depannage" title="depannage"/></h1>
            	<p>Entete</p>
            </header>
            <div id="bloc_principal">
                <nav><h2>titre</h2><a href="#">lien</a><a href="#">lien</a><a href="#">lien</a><a href="#">lien</a><a href="#">lien</a><a href="#">lien</a><a href="#">lien</a><a href="#">lien</a><a href="#">lien</a><a href="#">lien</a><a href="#">lien</a><a href="#">lien</a></nav>
                <section>
                        <article>
                        article
                        </article>
                </section>
                <div class="push"></div>
             </div><!--Fin du bloc_principal-->
            <footer>pied <a href="#">lien</a> <a href="#">lien</a> <a href="#">lien</a> </footer>
        </div><!--Fin du bloc #page (bloc_principal+header+aside)-->

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}