Question

<div class="content-top" style="width: 990px">
    <div style="width: 722px; margin-right: 20px" class="left-middle"></div>
    <div style="width: 200px" class="right"></div>
</div>

div.left-middle and div.right are both inline-block elements. In Chrome, they appear next to each other horizontally, like I want them to. In the newest Firefox and all versions of IE, div.left-middle is on top of div.right. No margin/padding, so there’s plenty of space for div.right. I’ve tried making the width of div.left-middle incredibly small just to see if div.right would go back up there, it won’t. Any idea why this is happening? Thanks!

Answer 1

try adding

.content-top { white-space: nowrap; }
.content-top > div { white-space: normal; }

this should costrain your div to stay aligned side by side