I have a small structure of list items inside a container and I am trying to display horizontal overflow instead of vertical overflow. However, I am having trouble achieving this, possibly due to the properties like float and percentage that I am using.
Is there a way to achieve this result? Show only the horizontal overflow?
Here is the code:
HTML
<div id="CockpitCenter">
<ul class="CockpitContainerResult">
<li><div class="box">Box 1</div></li>
<li><div class="box">Box 2</div></li>
<li><div class="box">Box 3</div></li>
<li style="height: 400px;">
<div class="box" style="height: 370px;">Box 4</div>
</li>
<li><div class="box">Box 5</div></li>
<li><div class="box">Box 6</div></li>
<li><div class="box">Box 7</div></li>
</ul>
</div>
CSS
#CockpitCenter {
height: 500px; /* set only here in jsFiddle */
position: fixed;
left: 0;
border: solid 2px #ccc;
border-bottom: none;
overflow-x: auto;
}
div#CockpitCenter ul.CockpitContainerResult {
float: left;
width: 100%;
}
ul.CockpitContainerResult li {
margin: 5px 0;
height: 150px;
width: 50%;
float: left;
}
ul.CockpitContainerResult li:nth-child(even) {
float: right;
}
ul.CockpitContainerResult li div.box {
border: solid 1px #ccc;
margin: 15px;
border-radius: 20px;
height: 150px;
text-align: center;
}
Here is a demo