align-content-block-overflow-000-ref.html (8125B)
1 <!DOCTYPE html> 2 <title>CSS Box Alignment: align-content on small block container with floats</title> 3 <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> 4 5 <style title="Needed for automation; delete to review/debug"> 6 @import "/fonts/ahem.css"; 7 html { font: 10px/1 Ahem; max-width: 800px; } 8 .label { display: none; } 9 </style> 10 11 <style> 12 html, body { margin: 0; padding: 0; } 13 14 .test { height: 1.8em; margin: 0.5em 2em; overflow: hidden; 15 /* show bounds of test box without interfering with margin-collapsing */ 16 background: black; padding-right: 2px; } 17 /* ensure float is contained */ 18 .float { float: right; background: orange; height: 2em } 19 /* ensure margin is contained */ 20 .in-flow { margin-top: 1em; background: orange } 21 /* ensure relpos is ignored */ 22 .relpos { position: relative; top: -1.5em; } 23 /* ensure abspos static position follows alignment */ 24 .wrapper { position: relative; } 25 .abspos { position: absolute; right: 0; margin-top: -1.5em; } 26 /* ensure overflow is not counted */ 27 .overflow { height: 0; } 28 29 /* cram into 800x600 */ 30 html { max-height: 600px; columns: 3 } 31 .wrapper { break-inside: avoid; border: solid 2px gray; padding: 3em 0; } 32 33 /* readability */ 34 .test > * { color: #8888; } 35 .label { color: black; font-weight: bold; } 36 </style> 37 38 <div class="wrapper"> 39 <div class="test"> 40 <div class="float">FLT</div> 41 <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div> 42 <div class="in-flow"> 43 <div class="float">FLT</div> 44 <span class="label">START</span> 45 <span class="abspos">ABS</span> 46 <span class="relpos">REL</span> 47 <div class="overflow">OVERFLOW</div> 48 </div> 49 </div> 50 </div> 51 <div class="wrapper"> 52 <div class="test"> 53 <div class="float">FLT</div> 54 <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div> 55 <div class="in-flow"> 56 <div class="float">FLT</div> 57 <span class="label">CENTER</span> 58 <span class="abspos">ABS</span> 59 <span class="relpos">REL</span> 60 <div class="overflow">OVERFLOW</div> 61 </div> 62 </div> 63 </div> 64 <div class="wrapper"> 65 <div class="test"> 66 <div class="float">FLT</div> 67 <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div> 68 <div class="in-flow"> 69 <div class="float">FLT</div> 70 <span class="label">END</span> 71 <span class="abspos">ABS</span> 72 <span class="relpos">REL</span> 73 <div class="overflow">OVERFLOW</div> 74 </div> 75 </div> 76 </div> 77 <div class="wrapper"> 78 <div class="test"> 79 <div class="float">FLT</div> 80 <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div> 81 <div class="in-flow"> 82 <div class="float">FLT</div> 83 <span class="label">BASELINE</span> 84 <span class="abspos">ABS</span> 85 <span class="relpos">REL</span> 86 <div class="overflow">OVERFLOW</div> 87 </div> 88 </div> 89 </div> 90 <div class="wrapper"> 91 <div class="test"> 92 <div class="float">FLT</div> 93 <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div> 94 <div class="in-flow"> 95 <div class="float">FLT</div> 96 <span class="label">LAST BASELINE</span> 97 <span class="abspos">ABS</span> 98 <span class="relpos">REL</span> 99 <div class="overflow">OVERFLOW</div> 100 </div> 101 </div> 102 </div> 103 <div class="wrapper"> 104 <div class="test"> 105 <div class="float">FLT</div> 106 <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div> 107 <div class="in-flow"> 108 <div class="float">FLT</div> 109 <span class="label">FLEX-START</span> 110 <span class="abspos">ABS</span> 111 <span class="relpos">REL</span> 112 <div class="overflow">OVERFLOW</div> 113 </div> 114 </div> 115 </div> 116 <div class="wrapper"> 117 <div class="test"> 118 <div class="float">FLT</div> 119 <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div> 120 <div class="in-flow"> 121 <div class="float">FLT</div> 122 <span class="label">FLEX-END</span> 123 <span class="abspos">ABS</span> 124 <span class="relpos">REL</span> 125 <div class="overflow">OVERFLOW</div> 126 </div> 127 </div> 128 </div> 129 <div class="wrapper"> 130 <div class="test"> 131 <div class="float">FLT</div> 132 <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div> 133 <div class="in-flow"> 134 <div class="float">FLT</div> 135 <span class="label">UNSAFE START</span> 136 <span class="abspos">ABS</span> 137 <span class="relpos">REL</span> 138 <div class="overflow">OVERFLOW</div> 139 </div> 140 </div> 141 </div> 142 <div class="wrapper"> 143 <div class="test"> 144 <div class="float" style="margin-top: -0.6em">FLT</div> 145 <div style="margin-bottom: -0.6em"></div> 146 <div class="in-flow"> 147 <div class="float">FLT</div> 148 <span class="label">UNSAFE CENTER</span> 149 <span class="abspos">ABS</span> 150 <span class="relpos">REL</span> 151 <div class="overflow">OVERFLOW</div> 152 </div> 153 </div> 154 </div> 155 <div class="wrapper"> 156 <div class="test"> 157 <div style="margin-bottom: -1.2em"></div> 158 <div class="in-flow"> 159 <div class="float" style="margin-top: -1em">FLT</div> 160 <div class="float">FLT</div> 161 <span class="label">UNSAFE END</span> 162 <span class="abspos">ABS</span> 163 <span class="relpos">REL</span> 164 <div class="overflow">OVERFLOW</div> 165 </div> 166 </div> 167 </div> 168 <div class="wrapper"> 169 <div class="test"> 170 <div class="float">FLT</div> 171 <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div> 172 <div class="in-flow"> 173 <div class="float">FLT</div> 174 <span class="label">SAFE START</span> 175 <span class="abspos">ABS</span> 176 <span class="relpos">REL</span> 177 <div class="overflow">OVERFLOW</div> 178 </div> 179 </div> 180 </div> 181 <div class="wrapper"> 182 <div class="test"> 183 <div class="float">FLT</div> 184 <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div> 185 <div class="in-flow"> 186 <div class="float">FLT</div> 187 <span class="label">SAFE CENTER</span> 188 <span class="abspos">ABS</span> 189 <span class="relpos">REL</span> 190 <div class="overflow">OVERFLOW</div> 191 </div> 192 </div> 193 </div> 194 <div class="wrapper"> 195 <div class="test"> 196 <div class="float">FLT</div> 197 <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div> 198 <div class="in-flow"> 199 <div class="float">FLT</div> 200 <span class="label">SAFE END</span> 201 <span class="abspos">ABS</span> 202 <span class="relpos">REL</span> 203 <div class="overflow">OVERFLOW</div> 204 </div> 205 </div> 206 </div> 207 <div class="wrapper"> 208 <div class="test"> 209 <div class="float">FLT</div> 210 <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div> 211 <div class="in-flow"> 212 <div class="float">FLT</div> 213 <span class="label">SPACE-EVENLY</span> 214 <span class="abspos">ABS</span> 215 <span class="relpos">REL</span> 216 <div class="overflow">OVERFLOW</div> 217 </div> 218 </div> 219 </div> 220 <div class="wrapper"> 221 <div class="test"> 222 <div class="float">FLT</div> 223 <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div> 224 <div class="in-flow"> 225 <div class="float">FLT</div> 226 <span class="label">SPACE-BETWEEN</span> 227 <span class="abspos">ABS</span> 228 <span class="relpos">REL</span> 229 <div class="overflow">OVERFLOW</div> 230 </div> 231 </div> 232 </div> 233 <div class="wrapper"> 234 <div class="test"> 235 <div class="float">FLT</div> 236 <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div> 237 <div class="in-flow"> 238 <div class="float">FLT</div> 239 <span class="label">SPACE-AROUND</span> 240 <span class="abspos">ABS</span> 241 <span class="relpos">REL</span> 242 <div class="overflow">OVERFLOW</div> 243 </div> 244 </div> 245 </div> 246 <div class="wrapper"> 247 <div class="test"> 248 <div class="float">FLT</div> 249 <div></div> 250 <div class="in-flow"> 251 <div class="float">FLT</div> 252 <span class="label">NORMAL</span> 253 <span class="abspos">ABS</span> 254 <span class="relpos">REL</span> 255 <div class="overflow">OVERFLOW</div> 256 </div> 257 </div> 258 </div> 259 260 <p> 261 <button onclick="document.querySelector('style[title]').textContent = 'html { font: 10px/1 sans-serif; }'">Show Text</button>