Positioning divs next to eachother

I'm trying to cre开发者_如何学Cate a very simple jQuery slider; however, to get started, I wanted to position my divs next to eachother instead of underneath eachother so I could animate the 'left:' css value. I'm dumb and completely failing at this though. I don't get it.

Here's an example of the code I'm playing with:

http://jsfiddle.net/YUQWx/1/

I don't understand why they stay below eachother instead of going next to eachother. The left: seems to be getting ignored? I'm probably missing out on something here.

Thanks in advance.

You're spelling .scrolling-content with a dash in the CSS, but with an underscore (<div id="zone_a" class="scrolling_content">) in the HTML. Fix the spelling, and you'll be fine :-)

Have you tried float: left;. Change the following:

#scrollzone
{
    width: 700px;
    height: 200px;
    position: relative;
    float: left;    
}

#zone_a, #zone_b, #zone_c
{
    width: 300px;
    float: left;
    height: 200px;    
    top: 0px;
}

You need to float the divs. Something like:

#div1 { 
    float: left;
    width: 200px;
}

#div2{ 
    float:left;
    width:200px;
}