I have a div with several child divs which are floating left. I don't want them to break, so I set them to display:inline-block
and white-space:nowrap
. Unfortunately nothing happens at all. They just keep breaking.
At the end I want to scroll in x-direction, but when I add overflow-x:scroll; overflow-y:visible
it scrolls in y-direction.
.a {
width: 400px;
height: 300px;
white-space: nowrap;
display: inline-block;
}
.b {
float: left;
width: 50px;
height: 200px;
display: inline-block;
}
<div class="a">
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="clearfix"></div>
</div>
You can see my complete implementation on JSFiddle