trying to create a div below a div css

I realize this is a a pretty basic question, and perhaps I'm taking advantage of you all while I should be sifting through some dense css books/materials. But I can't figure out why my code doesn't work.

I'm trying to create two divs on a 开发者_JAVA百科page, one below the other and it seems like I should be able to give the lower and absolute position which is below the top div.

I've got to div box whose css layouts are all the same but they don't look anything like eachother. Why is it that the second one looks completely unlike the first, why can't I make a "copy" of the first and place it below the first?

Heres the code. the top is the desired scroller is the desired effect. http://jsfiddle.net/7YueC/

---

Take out the IDs on the divs and/or add the class .same and then switch the #lasteventimg styles to .same. Remove the #2 styles.

Fiddle: http://jsfiddle.net/7YueC/7/

---

You don't have to use absolute positioning to position one div below another.

Check out this, a jsFiddle I did to demonstrate how to get one div below another.

---

since you are trying to achieve the exact same effect on both divs and all the contained elements - why not define a class that is applied to each div. div is a block level element, so they will stack on top of one another by default - no absolute positioning needed.

Here is your code, with the addition of the class eventimg and slightly modified CSS http://jsfiddle.net/ZXGUt/

---

Like mentioned prior if you are duplicating the same effect on two divs, change the styling to a class and use it on both. Secondly an ID cannot start with a number, otherwise the styling will not take affect. Change it to secondEventImage or similar. If you are programming websites, I would suggest using Firefox and plugin Firebug. It allows you to check if the styling is being applied and make quick edits to view how things will be prior to making changes in the code.

CODE - Example

 div#two {margin-left: 10%;margin-right: 10%;overflow-x: scroll;overflow-y: hidden;}
 div#two ul {list-style: none;height: 100%;width: 8000px;}
 div#two ul li{float:left;}
 div#two img {width: 200px;float: left;}

 OR

 div.sameDivs {..........}
 div.sameDivs ul {..........}
 div.sameDivs ul li {..........}
 div.sameDivs img {..........}
 <div id="lasteventimg" class="sameDivs"> ....... </div>