| <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 “x”), <i>preferred minimum width</i> < <i>available width</i> < <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> |
