Floating WinJS.UI.ListView elements in Windows 8 - HTML app

Question

I am learning windows 8/HTML/JavaScript app creation. I am trying to create a WinJS.UI.ListView as described in the MSDN site.

Now I have three listview elements and I want them to be placed on a single row. I tried used css float:left property to display them in one line.

But the problem is I can't get them in a single line.

HTML CODE

<section aria-label="Main content" role="main">
            <div id="iconTextApplicationsTemplate" data-win-control="WinJS.Binding.Template">
                <div class="iconTextApplications" >
                    <img  class="iconTextApplicationsImage" src="#" style="width: 100px; height: 100px;" 
                        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 } }" >
</div>
        </section>

.win-container{
	margin:auto;

}  
.win-surface {
	width:100%;
	margin: 0 auto;

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


#iconTextApplicationsTemplate {
	    float:left;
		display:table-row;
		width:100%;
		height:100%;
}

Am I approaching it in the wrong way?

or Should I go for other techniques?