Nathan_Sav Nathan_Sav - 5 months ago 11
CSS Question

Adding horizontal divs to container, keep in 1 row

I'm trying to create a UI to show tasks assigned to projects, this is all working fine. I'm usually coding non UI stuff, so I am lost, with the last part.

I've a container for the project "tiles" and the project tiles etc populating the container is fine, however, I cant get them to continue horizontally past the RHS of the container, I've overflow-x as scroll, which is fine, but they just start a new line.

This is my CSS

.slane_RHS
{
border:1px solid silver;
border-radius:0px 5px 0px 0px;
width:70%;
margin-top:5px;
background-color:rgb(240,240,235);
margin-left:-1px;
overflow-y:hidden;
overflow-x:scroll;
}
.tile{
width:100px;
border:1px solid blue;
display:inline-block;
margin-left:5px;
margin-top:1.5px;
}


That's my issue, I want to be able to scroll to see the tiles past the div end, as they just become hidden when vertical.

Answer

You can declare white-space:nowrap; to the parent to prevent the inline-blocks from wrapping to the next line:

http://jsbin.com/kagabopiza/edit?html,css,output