In my attempt to design a 3-column home layout, I have successfully styled the center, left, and right sections. However, I am facing difficulty in placing two sliders within the middle class. My goal is to have slider1 positioned on top inside the middle class, followed by slider2 below it.
You can view the current issue here: JSFIDDLE. The sliders are not displaying properly inside the middle div.
This is what I have tried so far:
HTML
<div id="content-container">
<div class="middle">
<div class="slider1"></div>
<div class="slider2"></div>
</div>
<div class="left">
<div></div>
<div></div>
</div>
<div class="right">
<div></div>
<div></div>
</div>
</div>
CSS
/* Container */
#content-container{
background:white;
margin-top:10px;
margin-bottom:10px;
height:600px;
}
/* ensure container heights match*/
.left,.right,.middle{
height:100%;
}
.left{
float: left;
width: 23%;
border:1px solid red;
}
.right{
float: right;
width: 23%;
border:1px solid red;
}
.middle{
display: inline-block;
width: 53%;
border:1px solid red;
}
/* Sliders */
.slider1 {
height: 50px;
border:1px solid green;
}
.slider2 {
height:60px;
border:1px solid green;
}
Thank you for your help!