Prevent inline block from wrapping but allow content to wrap

Question

I have this layout:

<ul style="white-space:nowrap;">
    <li style="width:200px; display:inline-block;"></li>
    <li style="display:inline-block; vertical-align:top; padding-left:10px;"></li>
</ul>

I have managed to stop the ul from wrapping which is a start. However, the content in the 2nd li continues off screen. Overlapping its parent elements etc.

I need the 2nd li to take up the slack and be dynamic in width unlike the first li. And I need the text to wrap inside the 2nd li.

Answer 1

li {display:table;}

is your friend. Also, don't forget to remove inline-styles!

Answer 2

Try white-space: normal on the li elements.

white-space is inherited by default so they received nowrap from the ul.

I'm starting to think that you are using an ul for layout purposes which div might be better suited for:

<div class="Item">
 <div class="ImageContainer"><img src="" alt="/></div>
 <div class="TextContainer">Text text text text text</div>
</div>

.Item {
 width: 200px;
 overflow: auto;
}

.ImageContainer {
 float: left;
 width: 40%;
}

.TextContainer {
 float: left;
 width: 60%;
}