Display:inline not working?

Question

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;
}

@JoshCrozier thank you for your response, the problem is with display:inline, its not displaying the classes as inline divisions, rather display as inline-block. — TKA, Apr 27 '14 at 00:16
@TKA you didn't put quotes around class names in the fiddle. — Milan and Friends, Apr 27 '14 at 00:17
@Popnoodles thank you for your response, the code is available in links mentioned. — TKA, Apr 27 '14 at 00:17
@TKA Stackoverflow asks that you post code in the question, not just link to third-party sites, as that code may disappear causing this question to be useless. http://stackoverflow.com/help/how-to-ask — Popnoodles, Apr 27 '14 at 00:20
@Popnoodles Oops! sorry my mistake! I will be careful next time! any way Josh Crozier gave me the answer, so I will be resolving this question. — TKA, Apr 27 '14 at 00:23
@TKA Do you mean removing the question? Questions remain on Stackoverlow for use by people having similar problems. Without that code this question may become useless to Stackoverflow users. — Popnoodles, Apr 27 '14 at 00:54

score 1 · Accepted Answer · edited May 23 '17 at 12:24

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.

Display:inline not working?

1 Answers1