Place Buttons On Each Side Of Scrollable Div

I'm trying to place buttons on the left and the right side of a scrollable div. See this jsfiddle[1] where they are still wrapped. So I changed the display of content and btn to in

Solution 1:

I am confused with you saying buttons are not nicely outlined, but I guess you meant align, than you have to use vertical-align: top; as you are using display: inline-block; so your buttons are aligned to the baseline.

.btn {
    width: 30px;
    height: 40px;
    display: inline-block;
    vertical-align: top;
}

Demo

---

You can also float all your elements to the left as @Jarno suggested, but if you are going with float than make sure you clear your elements using clear: both; property, else you will end up with undesired positioning of your elements.

Solution 2:

make all elements floating ~> DEMO

.content {
        width: 300px;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        height: 40px;
        display: inline-block;
        float: left;
        margin: 010px;
    }

   .btn {
       width: 30px;
       height: 40px;
       display: inline-block;
       float: left;
    }

OR you can use vertical-align for elements to fit each other vertically

Solution 3:

You could use float:left; on .content and .btn.

Also, don't forget to put overflow:hidden; on your .container.

Example

Solution 4:

You need to add float positions to each .btn. float left for the left arrow and float right

Solution 5:

Add the vertical align to the buttons:

.btn {
    width: 30px;
    height: 40px;
    display: inline-block;
    vertical-align: top;
}

http://jsfiddle.net/y84VA/7/