CODEWITHSUNDEEP
htmlcssalignment
Nathan_Sav
Nathan_Sav

Reputation: 8531

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.

Upvotes: 0

Views: 40

Answers (1)

Joey M-H
Joey M-H

Reputation: 773

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

Upvotes: 2

Related Questions