Positioning divs next to eachother

Question

I'm trying to create 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.

It turns out I'm stupid and can't type. +1 for those who bothered spending their time on me >. — Joris Ooms, May 19 '11 at 20:29

score 2 · Accepted Answer · answered May 19 '11 at 20:28

2

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 :-)

answered May 19 '11 at 20:28

Pär Wieslander

28,374
7
55
54

score 1 · Answer 2 · answered May 19 '11 at 20:25

1

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;
}

answered May 19 '11 at 20:25

Brian Fisher

23,519
15
78
82

http://jsfiddle.net/YUQWx/3/ I added it to the #zone_a, #zone_b selector, doesn't seem to be working? – Joris Ooms May 19 '11 at 20:27
Updated my answer with the changes to the original jsfiddle – Brian Fisher May 19 '11 at 20:30

score 1 · Answer 3 · answered May 19 '11 at 20:25

1

You need to float the divs. Something like:

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

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

answered May 19 '11 at 20:25

stevecomrie

2,423
20
28

http://jsfiddle.net/YUQWx/3/ doesn't seem to be working? Or am I adding it to the wrong selector. – Joris Ooms May 19 '11 at 20:27
You need to use selector names specific to your own problem, I was simply providing a generalization. – stevecomrie May 19 '11 at 20:34

Positioning divs next to eachother

3 Answers3