| <!doctype html> | |
| <style> | |
| body * { | |
| border: 5px solid red; | |
| padding: 5px; | |
| } | |
| span { | |
| display: inline-block; | |
| width: 200px; | |
| border-color: green; | |
| } | |
| .float { | |
| float: left; | |
| height: 300px; | |
| } | |
| /* Should be shrink wrapped like it was an inline block */ | |
| .fit-content, | |
| .max-content, | |
| .min-content { | |
| display: inline-block; | |
| } | |
| /* fill-available can't avoid the float so it should be pushed down */ | |
| .fill-available { | |
| clear: left; | |
| } | |
| </style> | |
| <body> | |
| <div class="float">Float</div> | |
| <div class="min-content"> | |
| <span>Min Content</span><br>on this box. | |
| </div> | |
| <br> | |
| <div class="max-content"> | |
| <span>Max Content</span> on this box. | |
| </div> | |
| <br> | |
| <div class="fit-content"> | |
| <span>Fit Content</span> on this box. | |
| </div> | |
| <br> | |
| <div> | |
| <span>Auto</span> on this box. | |
| </div> | |
| <div class="fill-available"> | |
| <span>Fill Available</span> on this box. | |
| </div> | |
| </body> |