Titanium ScrollView Not Displaying UI Properly

So this is my code:

var startWeekWin = Ti.UI.createWindow({
title:'Startup Weekend',
layout: 'vertical',
backgroundColor:'#b6e2e2'
});

// create scroll view here
var sv = Ti.UI.createScrollView({
contentWidth:'auto',
contentHeight: 'auto',
top: 0,
showVerticalScrollIndicator: true
}); 

startWeekWin.add(sv);

var lblPicture = Ti.UI.createLabel({
top: 0,
width: 'fill',
height: 100,
backgroundImage: 'images/StartUpWeekend.png'
});

var lblTitle = Ti.UI.createLabel({
top: 15,
left: 15,
right: 15,
height: '15%',
font: {
    fontSize: 24,
    fontWeight: "bold",
    fontFamily: "Helvetica"
},
text: "What is it?",
color: '#0a3f56',
backgroundColor: '#b6e2e2'
});

var lblText = Ti.UI.createLabel({
top: 30,
left: 15,
right: 15,
height: 70,
font: {
    fontSize: 16,
    fontFamily: "Helvetica",
},
text: "Etsy doostang zoodles disqus groupon " +
         "greplin oooj voxy " +
         "zoodles, weebly ning heekya " +
         "handango imeem plugg",
color: '#1d1d1d',
backgroundColor: '#b6e2e2'
});

var lblDate = Ti.UI.createLabel({
top: 30,
width: 'fill',
height: 50,
font: {
    fontSize: 24,
    fontWeight: "normal",
    fontFamily: "Helvetica",
    fontStyle: "italic"
},
text: "     January 23-25, 2015",
color: '#0a3f56',
backgroundColor: '#b6e2e2'
});

// video trailer goes here
var trailer = Ti.UI.createLabel({
top: 35,
width: 'fill',
height: 50,
text: 'Trailer Goes Here',
color: '#1d1d1d',
backgroundColor: '#b6e2e2'
});

// learn more button
var learnMoreButton = Ti.UI.createButton({
top: 40,
left: 40,
right: 40,
width: 180,
height: 50,
title: 'Learn More',
font: {
    fontSize: 18,
    fontFamily: "Helvetica",
    fontWeight: "normal"
},
color: '#0a3f56',
backgroundColor: 'white'
});

sv.add(lblPicture);
sv.add(lblTitle);
sv.add(lblText); 
sv.add(lblDate);
sv.add(trailer);

sv.add(learnMoreButton);

And this is what it displays: http://imgur.com/t4AQTMJ

I don't understand why everything is stacking on top of each other.

Could someone point out what I'm missing?

Thanks.

Solution

There is many way to build the UI That you want. First you given all child element of sv(scroll view) to top. Every child element take top from the SV start position. If you want to give top to every child element of sv then apply layout vertical property to scroll view.

And second way is give top after the end of first element.

every one is taking top from the scroll view so they all are over riding on every one, First apply first way and let me know if face any difficulty in this.

Not using layout style will give it a property similar position:absolute of HTML. Not using layout is at times good as it helps in centering the view.