Perfect floating layout

by HugeHugh

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.0.0.js"></script>
<div id="viewport" data-bind="css:viewStyle, foreach:rooms">
    <div class="roomCon" data-bind="css:roomStyle">
        <div class="room"></div>
    </div>
</div>

CSS

html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}
#viewport {
    position:absolute;
    left:0;top:0;right:0;bottom:0;
    overflow:hidden;
    background:red;
}
.roomCon {
    position:relative;
float:left;
    display:inline-block;
width:20%;
    height:50%;
}
.room {background-color:#eff;
    position:absolute;
    left:1px;top:1px;right:1px;bottom:1px;
    border:1px solid #eee;
}

JavaScript

function roomModel() {
    var roomStyle = ko.computed(function(){
        return '';
    });
    
    return {
        roomStyle: roomStyle
    };
}

function viewportModel() {
    var rooms = ko.observableArray([]);
    for (var i = 0; i < 10; i++) {
        rooms.push(roomModel());
    }
    var viewStyle = ko.computed(function(){
        return '';
    });
    
    return {
        viewStyle: viewStyle,
        rooms: rooms
    };
}

$(function() {
    ko.applyBindings(viewportModel());
});