Boxes Next to each Other full page

Multiple boxes on top and next to each other with navigation

by b2550

HTML

<div id="b1x1" class="horizontal">Place your content here.</div>
<div id="b1x2" class="horizontal">Place your content here.</div>
<div id="b1x3" class="horizontal">Place your content here.</div>
<div class="clear"></div>
<div id="b2x1" class="horizontal">Place your content here.</div>
<div id="b2x2" class="horizontal">Place your content here.</div>
<div id="b2x3" class="horizontal">Place your content here.</div>

CSS

* {
    margin: 0;
}
html, body {
    height: 100%;
}
body {
    white-space: nowrap;
    overflow:hidden;

/* LAYOUT START */
}
.clear {
    clear:both;
}
.horizontal {
    position:relative;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    width: 100%;
    display: inline-block;
}
/* LAYOUT END */

JavaScript

var $root = $('html, body');
$('a').click(function () {

    $root.animate({

        scrollLeft: $($.attr(this, 'href')).offset().left,
        scrollTop: $($.attr(this, 'href')).offset().top

    }, 500);

    return false;
});