positioning images inside div element - html

Question

I have created a slideshow which sits inside a div element. The images are not added in the html, but through javascript and adjust their class attribute to fade In and Out.
I am trying to add buttons over the images for next and previous slide.
Problem I'm having is that the img tags are showing on screen and inside the html structure shown in the debugger, but when I examine the element the div is at the top with height 0px above the images? So the images are not sitting inside.
The reason for this is that I want to add buttons positioned relative to the containing div element (to ensure they stay on the left/ middle and right/middle of the image when the window is resized.
To clarify; I need to add the images inside the div #container so that the size/ position are relative to it. I then want to add the other images as buttons also relative to the div so that they remain in position when the screen is resized. How do I do this?
Demo
HTML
<div id="container">
<!--IMG elements created in JS go here-->
<img class="previous_button" src="symbols/PreviousArrow.png"/>
<img class="next_button" src="symbols/NextArrow.png"/>
</div>
<script src = "jsScript.js" type="text/javascript"></script>
CSS
#container {
position: relative;
z-index:1;
width:50%;
height:600px;
top:20%;
border:10px solid black;
}
#container img#main {
transition:opacity 2s;
z-index:1;
position:absolute;
top:20%;
opacity:0;
width:25%;
}
#container img#main.fadeIn {
opacity:1;
z-index:100;
}
.previous_button {
position:absolute;
margin-left:8%;
height:35px;
width:35px;
}
.previous_button:hover {
opacity:1;
}
.next_button {
position: absolute;
height:35px;
width:35px;
}
.next_button:hover {
opacity:1;
}
JAVASCRIPT
var curIndex=0;
var imgDuration=2000;
var timeout;
var images;
var links;
var container=document.getElementById("container");
function getImageAndLink(){
images=document.querySelectorAll('img[id]');
};
var imageArray=[
{link:"page1.html", src:"image1.gif", id:"main"},
{link:"page2.html", src:"image2.gif", id:"main"},
{link:"page3.html", src:"image3.gif", id:"main"}
];
function create(arr){
for (i = 0; i < arr.length; i++) {
var imgEl = document.createElement("img");
imgEl.src=arr[i].src;
var id=arr[i].id;
imgEl.setAttribute("id",id);
var imgElA = document.createElement("a");
var link=arr[i].link;
imgElA.setAttribute("href", link);
imgElA.setAttribute("id",id);
imgElA.appendChild(imgEl);
container.appendChild(imgElA);
}
};
function slideshow() {
images.item(curIndex).className="fadeIn";
links.item(curIndex).className="fadeIn";
var interval=setInterval(function(){
images.item(curIndex).className="";
curIndex++;
if (curIndex==images.length) {
curIndex=0;
};
images.item(curIndex).className="fadeIn";
},imgDuration);
function stopSlide(){
clearInterval(interval)
};
container.addEventListener('mouseover', stopSlide, false);
container.addEventListener('mouseout', slideshow, false);
};
create(imageArray);
getImageAndLink();
slideshow();

Answer 1

Looks like your issue is that the inner content of the DIV has Absolute position and then they come out of the DIV on the dom, so makes it to have the 0 height.
with taking out the absolut position of those seem to have the height (added a border to the div so that you can see):
took out the position of these like this:
.previous_button {
margin-left:8%;
height:35px;
width:35px;
}
https://jsfiddle.net/gqjcpa0m/3/