Question

Please see the demo here: http://jsfiddle.net/Freewind/Vkp4U/

The html:

<div class="outer">
    <div class="x">x</div>
    <div class="y">y</div>
    <div class="z">z</div>
</div>​

The css:

.outer {
    border: 1px solid black;
    overflow: scroll-x;
}

.x {
    width: 400px;
    border: 1px solid red;
    float:left;
}

.y {
    width: 400px;
    border: 1px solid yellow;
    float:left;
}

.z {
    width: 400px;
    border: 1px solid blue;
    float:left;
}​

How to let the 3 inner divs displayed in line, won’t wrap if I resize the browser to smaller?

Limitations:

1. the width of outer div should not be specified
2. the width of inner divs are fixed

Answer 1

Hi you can define display table and table-cell in you css properties as like this

Css

.outer {
    border: 1px solid black;
    overflow: scroll-x;

    display:table;
}

.x {
    width: 400px;
    border: 1px solid red;
    display:table-cell;
}

.y {
    width: 400px;
    border: 1px solid yellow;
    display:table-cell;
}

.z {
    width: 400px;
    border: 1px solid blue;
    display:table-cell;
}

HTML

<div class="outer">
<div class="x">x</div>
<div class="y">y</div>
<div class="z">z</div>
</div>​
​

Live demo http://jsfiddle.net/Vkp4U/5/