Looking to create a horizontal scroll layout using CSS and floats? Here's my attempt, but I'm not getting the desired result. Flexbox isn't an option as it needs to be supported on IE. Take a look at my code and point out where I might have gone wrong.
.bar {
float: left;
background-color: rgb(250, 250, 250);
min-width: 100%;
height: 62px;
padding-top: 8px;
white-space: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
}
.box {
float: left;
display: block;
height: 46px;
width: calc(12.5% - 8px);
border-radius: 3px;
background-color: rgba(0, 123, 45, 1);
box-shadow: 0 3px 4px 0 rgba(211, 246, 250, 1);
text-align: center;
margin-left: 13px;
padding: 5px;
}
.day {
display: block;
opacity: 0.76;
color: rgba(255, 255, 255, 1);
font-size: 11px;
line-height: 13px;
}
.date {
display: block;
color: rgba(255, 255, 255, 1);
font-size: 18px;
font-weight: 500;
line-height: 22px;
} <div class='bar'}>
<div>
<div class='box'}>
<div class='day'>monday</div>
<div class='date'>25</div>
</div>
</div>
...
(repeated for each item)
...
<div>
<div class='box'}>
<div class='day'>monday</div>
<div class='date'>25</div>
</div>
</div>
</div>