<html>
<head>
    <title></title>
    <style>
        .container { width: 100px; }
        .left { float: left; border: solid; }
        .right { float: right; border: solid; }
        .clear { clear: both; height: 10px; }
        .inlineBlock { display: inline-block; width: 60px; height: 20px; background: silver; }
    </style>
</head>
<body>
    <p>
        Test shrink-to-fit width for floating elements (see <a href="http://www.w3.org/TR/2006/WD-CSS21-20061106/visudet.html#q8">CSS 2.1 10.3.5</a>).
    </p>
    <p>
        Shrink-to-fit width is min(max(<i>preferred minimum width</i>, <i>available width</i>), <i>preferred width</i>).
        In the following cases (except the &ldquo;x&rdquo;), <i>preferred minimum width</i> &lt; <i>available width</i> &lt; <i>preferred width</i>
    </p>
    <div class="container">
        <div class="left">
            longword longword
        </div>
        <div class="clear"></div>
        <div class="right">
            longword longword
        </div>
        <div class="clear"></div>
        <div class="left">
            longword longword
        </div>
        <div class="right">
            x
        </div>
        <div class="clear"></div>
        <div class="left">
            <div class="inlineBlock"></div>
            <div class="inlineBlock"></div>
        </div>
        <div class="clear"></div>
        <div class="right">
            <div class="inlineBlock"></div>
            <div class="inlineBlock"></div>
        </div>
    </div>
</body>
</html>
