Horizontal scrolling (to be enhanced with http://brandonaaron.net/code/mousewheel/docs

dabblet.css

/**
 * Horizontal scrolling (to be enhanced with http://brandonaaron.net/code/mousewheel/docs 
 *
 * JavaScript to add besides the plugin:
 * $(function() {
 * 	$("body > div#container").mousewheel(function(event, delta) {
 * 		this.scrollLeft -= (delta * 30);
 * 		event.preventDefault();
 * 	});
 * });​
 */



* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

    
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb {
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.5);
}

body {
    padding-bottom: 5em;
    padding-top: 7em;
}

body > div#container {
    min-height: 100%;
    height:auto !important;
    height:100%; /* IE hack for min-height */
    overflow:hidden;
    position:relative;
    white-space:nowrap;
    overflow-x:scroll;
    overflow-y:auto;

}

body > header {
    height:7em;
    position:relative;
    margin-top: -7em;
}

body > footer{
    height:5em;
}

body > div#container > .post {
    display: inline-block;
    min-width: 200px;
    vertical-align: top;
}​

dabblet.html

<header>
    Header
</header>
<div id="container">
    <article class="post">
        A1;
    </article>
    <article class="post">
        A2;
    </article>
    <article class="post">
        A3;
    </article>
    <article class="post">
        A4;
    </article>
    <article class="post">
        A5;
    </article>
</div>
<footer>
    footer
</footer>​

settings.json

{"view":"split","seethrough":"","prefixfree":"1","page":"css"}