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

Question

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 everything
I 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 (#Release-Monsters & #Release-Insides) each containing 3 further DIVs. It is these 2 DIVs (#Release-Monsters & #Release-Insides) that I would like to stack on top of eachother to form a column. Once I have these 2 working I would to add about 50 or so more.
My CSS is this:
#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;
}
and the HTML is this:
<div id="All-Releases-" class="default-skin demo">
<div id="Release-Monsters">
<div id="Artwork-Monsters"><img src="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="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="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="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
>

Answer 1

I looked over your HTML (not too bad except for list and <br>) and your CSS (overly complicated).
I cleaned things up a bit, you see the results at:
http://jsfiddle.net/audetwebdesign/42bgv/
Major CSS Fixes
Here is the CSS that I modified:
.All-Releases {
position: relative;
left: 20px;
top: 0px;
width:600px;
height: auto;
color: #CCC;
font-size: 12px;
font-family: Century Gothic, Geneva, sans-serif;
outline: 2px dotted blue;
}
.Release-Monsters {
position: relative;
width:600px;
height:322px;
outline: 2px dotted gray;
}
...
.Release-Insides {
position: relative;
width:600px;
height:322px;
outline: 2px dotted gray;
}
...
Originally, you declared absolute position for .All-Releases which caused all the panels to overlap each other, not good.
For Release-Monsters and Release-Insides, use position: relative so that the absolutely positioned elements stay where you expect. (Note: there are simpler ways to do this without using absolute positioning).
Finally, use class instead of id since id values are suppose to be unique.
Also, take advantage of CSS cascade and keep the font and color declarations in the top level rule, .All-Releases in this example.

Answer 2

Add a float property to each of the **s. For example:
#Artwork-Monsters {
position:absolute;
float:left;
left:19px;
top:2px;
width:284px;
height:284px;
z-index:3;
}

Answer 3

I would change your html to have unordered lists to start with to get rid of all the br tags that you have and may be able to get it a little neater.
JSFiddle
Example: http://jsfiddle.net/uk3BW/ <-- Doesn't have scroll bar
Example: http://jsfiddle.net/uk3BW/1/ <-- Has scroll bar
HTML
<ul id="Release-Info-Monsters">
<li> Prologue </li>
<li> Journey </li>
<li> Candles </li>
<li> Water </li>
<li> Underwater </li>
<li> Spores </li>
<li> Campfire </li>
<li> Dawn </li>
<li> Attack </li>
<li> Temple </li>
<li> Encounter </li>
<li> Monsters Theme </li>
</ul>
CSS
ul {
display:block;
background:#aeaeae;
padding:10px;
width: 250px;
list-style:none;
}
li {
display:block;
background:#eee;
padding: 10px 0;
width: 100%;
text-align:center;
}
li:last-child {
margin: 0;
}
li {
margin: 0 0 10px 0;}
li:hover {
background:#ccc;
}