CODEWITHSUNDEEP
htmlcssjquery-ui
Victor
Victor

Reputation: 5353

Overflow auto for div with inline-blocks inside

I have next markup: 

<div style="border: 1px solid black; width: 200px; height: 60px; overflow-x: auto">
    <img src="/images/thumbs/doc.png" width="100" height="60" style="display: inline-block; vertical-align:middle;">
    <div style="display: inline-block; vertical-align: middle;">test</div>
</div>

Actually I use jquery ui resizable plugin. When I resize the outer div and it becomes too small I want horizontal scrollbar appears. But instead the label near the image goes down. how to prevent this effect? Ideally I would like to apply text-overflow:elipsis effect to the label also, so firstly it shorts with "..." and then scrollbar appears. But I can't figure out how to prevent the label "test" goes down when I set small width

Upvotes: 1

Views: 2839

Answers (1)

korogui
korogui

Reputation: 203

I think you want to use in outer div the style

white-space: nowrap;

<div style="border: 1px solid black; width: 200px; height: 60px; overflow-x: auto; white-space: nowrap;">
    <img src="/images/thumbs/doc.png" width="100" height="60" style="display: inline-block; vertical-align:middle;">
    <div style="display: inline-block; vertical-align: middle;">test</div>
</div>

Upvotes: 2

Related Questions