CSS, image slider height with overlaying dots placement issue on responsive design - html

Question

Probably overlooking something simple, but the issue is when the browser window width is small. The overlaying dots are not placed properly (bottom of the image).
NOTE: If the "HEIGHT" attribute is removed from the HTML LI, then the images are not displayed.
Playing with height:auto; in the HTML/CSS has the same result. Max-height has the same effect.
I want to remove the hard coded HTML style height and have the dots always appear at the bottom of the image, no matter the size.
FIDDLE: http://jsfiddle.net/s3r8uuzz/
JavaScript files:
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//unslider.com/unslider.min.js" type="text/javascript"></script>
CSS:
.banner ul {
list-style: none; /* Lose the dot */
margin:0px;
padding:0px;
}
.banner li {
float: left;
background-size: 100% auto;
background-repeat: no-repeat;
}
.dots {
position: absolute;
left: 0;
right: 0;
text-align: center;
bottom: 0px;
background-color: #353535;
height: 35px;
opacity: .7;
}
.dots li {
position:relative;
top:11px;
left:-4px;
display: inline-block;
width: 10px;
height: 10px;
margin-left: 4px;
text-indent: -999em;
border: 2px solid #bc9a6a;
background-color: white;
border-radius: 6px;
cursor: pointer;
-webkit-transition: background .5s, opacity .5s;
-moz-transition: background .5s, opacity .5s;
transition: background .5s, opacity .5s;
}
.dots li.active {
background: #3e245b;
opacity: 1; /* opacity of the inside dot (not the border) */
}
#slider{
position: relative;
}
HTML:
<div id="slider" style="">
<div class="banner">
<ul>
<li style="background-image: url(http://cdn.nliphonedwwwghan.savviihq.com/wp-content/uploads/2013/12/500px1-580x375.jpg); height:350px;"></li>
<li style="background-image: url(http://cdn.nliphonedwwwghan.savviihq.com/wp-content/uploads/2013/12/500px1-580x375.jpg); height:350px;"></li>
</ul>
</div>
</div>
<div>
No matter the window size, this text should be directly under the image.
</div>
<script>
// main image settings
$('.banner').unslider({
arrows: false,
delay: 2000,
fluid: true,
speed: 1000,
dots: true
});
</script>

Answer 1

You are using position:absolute for the dots, to have them properly positioned in its parent and not the body of the page, you will need to give the slider container, which currently has an id of 'slider', a relative positioning.
#slider { position: relative; }
This will contain the absolute positioning of the dots within its parent container.