Question

Say I have this HTML:

<style>
.b{
float:left; width: 300px; height: 300px;
}
</style>

<div style="overflow:hidden;width:300px;height:300px;" id="a">
    <div class="b" style="background-color: red"></div>
    <div class="b" style="background-color: green"></div>
    <div class="b" style="background-color: blue"></div>
</div>

I want the .b divs to sit on one line. However, they only do this when #a‘s overflow is normal.

Answer 1

Add white-space: nowrap; to #a and remove float:left from .b

With scrollbar

#a{overflow:auto;width:300px;height:300px; white-space: nowrap;}
.b{
width: 300px; height: 300px; border:solid black 1px; display:inline-block
}​

DEMO

---

Without scrollbar

#a{height:300px; white-space: nowrap;}
.b{
width: 300px; height: 300px; border:solid black 1px; display:inline-block
}​

DEMO 2