CODEWITHSUNDEEP
htmlcssoverflow
TKA
TKA

Reputation: 128

Display:inline not working?

I am trying to make the divisions of class=unit-media to display in single line by having its parent overflow-x:scroll but not getting anywhere, Here is the code fiddle: http://jsfiddle.net/SH2EM/ any help would be highly appreciated, Thank you!

Here is code: http://jsfiddle.net/SH2EM/1/

CSS

.media {
    width:auto;
    height:125px;
    background-color:#BBC;
    overflow-x:scroll;
    overflow-y:hidden;
    padding:15px;
    white-space: nowrap;
}
.unit-media {
    display:inline;  /*Not working*/
    float:left;
    width:100px;
    height:120px;
    border:1px solid #CCC;
}

Upvotes: 2

Views: 3622

Answers (1)

Josh Crozier
Josh Crozier

Reputation: 241008

If you want it to work, the elements should not be floated - therefore remove float:left. Additionally, the display value should be inline-block as opposed to inline.

Updated Example

.media-upload {
    height:125px;
    background-color:#BBC;
    overflow-x:scroll;
    overflow-y:hidden;
    padding:15px;
    white-space: nowrap;
}
.unit-media {
    display:inline-block;
    width:100px;
    height:120px;
    border:1px solid #CCC;
}

To address your other concern regarding the space between the elements - see this answer. Simply put, inline elements respect the whitespace in the markup. You can simply remove the whitespace in order to solve the problem.

Upvotes: 1

Related Questions