| [email protected] | 24f5d00a | 2012-06-20 19:28:50 | [diff] [blame] | 1 | <!doctype html> |
| 2 | <style> |
| 3 | body * { |
| 4 | border: 5px solid red; |
| 5 | padding: 5px; |
| 6 | } |
| 7 | |
| 8 | span { |
| 9 | display: inline-block; |
| 10 | width: 200px; |
| 11 | border-color: green; |
| 12 | } |
| 13 | |
| 14 | .float { |
| 15 | float: left; |
| 16 | height: 300px; |
| 17 | } |
| 18 | |
| 19 | /* Should be shrink wrapped like it was an inline block */ |
| 20 | .fit-content, |
| 21 | .max-content, |
| 22 | .min-content { |
| 23 | display: inline-block; |
| 24 | } |
| 25 | |
| 26 | /* fill-available can't avoid the float so it should be pushed down */ |
| 27 | .fill-available { |
| 28 | clear: left; |
| 29 | } |
| 30 | </style> |
| 31 | |
| 32 | <body> |
| 33 | |
| 34 | <div class="float">Float</div> |
| 35 | |
| 36 | <div class="min-content"> |
| 37 | <span>Min Content</span><br>on this box. |
| 38 | </div> |
| 39 | |
| 40 | <br> |
| 41 | |
| 42 | <div class="max-content"> |
| 43 | <span>Max Content</span> on this box. |
| 44 | </div> |
| 45 | |
| 46 | <br> |
| 47 | |
| 48 | <div class="fit-content"> |
| 49 | <span>Fit Content</span> on this box. |
| 50 | </div> |
| 51 | |
| 52 | <br> |
| 53 | |
| 54 | <div> |
| 55 | <span>Auto</span> on this box. |
| 56 | </div> |
| 57 | |
| 58 | <div class="fill-available"> |
| 59 | <span>Fill Available</span> on this box. |
| 60 | </div> |
| 61 | |
| 62 | </body> |
