I've spent a lot of time reading through the questions and answers on this site, but I still can't figure out why my container won't allow horizontal scrolling for my smaller divs.
CSS
#theLoopTasksLabels {
width:90%;
height:90px;
position:relative;
margin-top: 60px;
margin-left:10px;
overflow-y: hidden;
overflow-x: scroll;
white-space: nowrap;
display: inline-block;
float:left;
}
#categoryTasksLabels {
height:70px;
padding:5px;
margin-left: 10px;
}
#categoryTasksLabels > h6 {
padding-top:2px;
padding-left:10px;
color:#B6B6B6;
}
#loopsTasksLabels {
width: 110%;
height: 90px;
display: inline-block;
float:left;
}
#loopsTasksLabels > div {
display: inline-block;
float:left;
}
#circleTaskLabels {
padding:5px;
border-radius: 3px;
display: inline-block;
margin-top:4px;
color:#fbfbfb;
}
HTML
<div id="theLoopTasksLabels">
<div id="loopsTasksLabels">
<div id="categoryTasksLabels">
<div id="circleTaskLabels" style="background-color:#eaa5a2">Label</div> <br>
<h6><span> 4</span> | <span>6</span></h6>
</div>
<div id="categoryTasksLabels">
<div id="circleTaskLabels" style="background-color:#eaa5a2">Label</div> <br>
<h6><span> 4</span> | <span>6</span></h6>
</div>
<div id="categoryTasksLabels">
<div id="circleTaskLabels" style="background-color:#eaa5a2">Label</div> <br>
<h6><span> 4</span> | <span>6</span></h6>
</div>
</div>
</div>
Despite following advice from other answers, I still can't get it to work. The horizontal scroll only kicks in when the content exceeds the width of the
<div id="categoryTasksLabels">Thank you for any help you can provide.