Basic CSS/HTML stacking up one DIV beneath another in a column

evanseoul

New Member
I realise this is so basic but cannot for the life of me work why I cannot get it working and have spent the last few hours trying everythingI need to the stack up DIVs so they form a big long column, one on top of the other. They are contained inside a JQuery scrollable DIV. I could absolute position all of the DIVS inside however there will be loads of them that change fairly regularly so would like a system where they automatically line if I have to insert a new one.So I basically have one large Scrollable DIV. Inside this I have 2 other DIVs each containing 3 further DIVs. It is these main 2 DIVs that contain the 3 further DIVs that I would like to stack on top of eachother to form a column. Once I have these 2 working I would to ad about 50 or so more.My CSS is this:\[code\]#All-Releases- { position:absolute; left:250px; top:210px; width:600px; height:600px; z-index:3;}/* Used to control height of scrollable div*/p.ex{height:600px;width:100px;} /* Vertical and horizontal scrollbar - one extra step required - add width of overview - overall width of scrolled content*/#All-Releases- { width: 500px; }#Release-Monsters { position:static; width:600px; height:322px; z-index:3; }#Artwork-Monsters { position:absolute; left:19px; top:2px; width:284px; height:284px; z-index:3;}#Release-Title-Monsters { position:absolute; left:322px; top:0px; width:284px; height:284px; color: #CCC; font-size: 18px; font-family: Century Gothic, Geneva, sans-serif; letter-spacing: 2px; text-align: justify; z-index:3;}#Release-Info-Monsters { position:absolute; left:322px; top:25px; width:278px; height:284px; color: #CCC; font-size: 12px; font-family: Century Gothic, Geneva, sans-serif; letter-spacing: 1px; text-align: justify; z-index:3;}#Release-Insides { display:block; width:600px; height:322px; z-index:3; }#Artwork-Insides { position:absolute; left:19px; top:2px; width:284px; height:284px; z-index:3;}#Release-Title-Insides { position:absolute; left:322px; top:0px; width:284px; height:284px; color: #CCC; font-size: 18px; font-family: Century Gothic, Geneva, sans-serif; letter-spacing: 2px; text-align: justify; z-index:3;}#Release-Info-Insides { position:absolute; left:322px; top:25px; width:278px; height:284px; color: #CCC; font-size: 12px; font-family: Century Gothic, Geneva, sans-serif; letter-spacing: 1px; text-align: justify; z-index:3;}\[/code\]and the HTML is this:\[code\]<div id="All-Releases-" class="default-skin demo"><div id="Release-Monsters"><div id="Artwork-Monsters"><img src="http://stackoverflow.com/questions/15909809/images/Release-Artwork/Monsters.jpg" width="284" height="284" /></div><div id="Release-Title-Monsters">MONSTERS</div><div id="Release-Info-Monsters">1. Prologue<br />2. Journey <br />3. Candles <br />4. Water <br />5. Underwater <br />6. Spores <br />7. Campfire <br />8. Dawn <br />9. Attack <br />10. Temple <br />11. Encounter <br />12. Monsters Theme </div></div><div id="Release-Insides"><div id="Artwork-Insides"><img src="http://stackoverflow.com/questions/15909809/images/Release-Artwork/Insides.jpg" width="284" height="284" /></div><div id="Release-Title-Monsters">INSIDES</div><div id="Release-Info-Insides">1. The Wider Sun <br />2. Vessel <br />3. Insides <br />4. Wire <br />5. Colour Eye <br />6. Light Through The Veins <br />7. The Low Places <br />8. Small Memory <br />9. A Drifting Up <br />10. Autumn Hill<br /> </div></div><p class="ex"></p></div> <div id="All-Releases-" class="default-skin demo"><div id="Release-Monsters"><div id="Artwork-Monsters"><img src="http://stackoverflow.com/questions/15909809/images/Release-Artwork/Monsters.jpg" width="284" height="284" /></div><div id="Release-Title-Monsters">MONSTERS</div><div id="Release-Info-Monsters">1. Prologue<br />2. Journey <br />3. Candles <br />4. Water <br />5. Underwater <br />6. Spores <br />7. Campfire <br />8. Dawn <br />9. Attack <br />10. Temple <br />11. Encounter <br />12. Monsters Theme </div></div><div id="Release-Insides"><div id="Artwork-Insides"><img src="http://stackoverflow.com/questions/15909809/images/Release-Artwork/Insides.jpg" width="284" height="284" /></div><div id="Release-Title-Monsters">INSIDES</div><div id="Release-Info-Insides">1. The Wider Sun <br />2. Vessel <br />3. Insides <br />4. Wire <br />5. Colour Eye <br />6. Light Through The Veins <br />7. The Low Places <br />8. Small Memory <br />9. A Drifting Up <br />10. Autumn Hill<br /> </div></div><p class="ex"></p></div><script type="text/javascript"> $(window).load(function () { $(".demo").customScrollbar(); });</script\[/code\]>
 
Top