Плавающие элементы WinJS.UI.ListView в Windows 8 - приложение HTML

Я изучаю создание приложений Windows 8/HTML/JavaScript. Я пытаюсь создать объект WinJS.UI.ListView, как описано на сайте MSDN.

Теперь у меня есть три элемента списка, и я хочу, чтобы они были помещены в одну строку. Я попытался использовать свойство css float:left чтобы отобразить их в одной строке.

Но проблема в том, что я не могу получить их в одной строке. Это мой снимок экрана

HTML:

 <section aria-label="Main content" role="main">
        <div id="iconTextApplicationsTemplate" data-win-control="WinJS.Binding.Template">
            <div class="iconTextApplications" >
                <img  class="iconTextApplicationsImage" src="#" data-win-bind="alt: title; src: picture" />
                <div class="iconTextApplicationsTitle" data-win-bind="innerText: title"></div>
            </div>       
        </div>

<div id="iconTextApplications" class="win-selectionstylefilled" data-win-control="WinJS.UI.ListView" data-win-options="{ itemDataSource : Icons.itemList.dataSource, 
    itemTemplate: select('#iconTextApplicationsTemplate'), 
    layout: { type:WinJS.UI.CellSpanningLayout } }" >

CSS

.win-container{
    margin:auto;
}  
.win-surface {
    width:100%;
    margin: 0 auto;
}
.win-viewport {
    width:100%;
    margin: 0 auto;
    background-color:rgb(94, 82, 68);
}

#iconTextApplicationsTemplate {
        float:left;
        width:100%;
        height:100%;
}

JavaScript

var dataArray = [
     { title: "One", picture: "images/jokes.png" },
    {title : "Two" , picture : "images/quotes.png" },
    { title: "Three", picture: "images/trivia.png" }
    ];

var dataList = new WinJS.Binding.List(dataArray);
var publicMembers = {
    itemList: dataList
};
WinJS.Namespace.define("Icons",publicMembers);

Я подхожу к нему неправильно?

или я должен пойти на другие методы?