Question

This is my code (please see this fiddle):

HTML

<div id="container">
    <span id="left">Left text</span>
    <span id="middle">Very very very very very long middle text.</span>
    <span id="right">Right text</span>
</div>

CSS

#container {
    white-space: nowrap;
    position: relative;
}

#left {
    border: solid 1px red;
}

#middle {
    border: solid 1px green;
}

#right {
    border: solid 1px blue;
    position: absolute;
    right: 0px;
}

I want the width of #middle to shrink as the window becomes smaller so that it doesn’t clash with #right.

Answer 1

If your are using any library like jQuery/Mootools etc.

Then, it’ll be very easy, see here (using jQuery):

http://jsfiddle.net/6AHSp/15/