| <!DOCTYPE html> |
| <title>CSS Box Alignment: align-content on small block container with floats</title> |
| <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> |
| |
| <style title="Needed for automation; delete to review/debug"> |
| @import "/fonts/ahem.css"; |
| html { font: 10px/1 Ahem; max-width: 800px; } |
| .label { display: none; } |
| </style> |
| |
| <style> |
| html, body { margin: 0; padding: 0; } |
| |
| .test { height: 1em; margin: 0.5em 2em; |
| /* show bounds of test box without interfering with margin-collapsing */ |
| background: black; padding-right: 2px; } |
| /* ensure float is contained */ |
| .float { float: right; background: orange; height: 2em } |
| /* ensure margin is contained */ |
| .in-flow { margin-top: 1em; background: orange } |
| /* ensure relpos is ignored */ |
| .relpos { position: relative; top: -1.5em; } |
| /* ensure abspos static position follows alignment */ |
| .wrapper { position: relative; } |
| .abspos { position: absolute; right: 0; margin-top: -1.5em; } |
| /* ensure overflow is not counted */ |
| .overflow { height: 0; } |
| |
| /* cram into 800x600 */ |
| html { max-height: 600px; columns: 3 } |
| .wrapper { break-inside: avoid; border: solid 2px gray; padding: 3em 0; } |
| |
| /* readability */ |
| .test > * { color: #8888; } |
| .label { color: black; font-weight: bold; } |
| </style> |
| |
| <div class="wrapper"> |
| <div class="test"> |
| <div class="float">FLT</div> |
| <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div> |
| <div class="in-flow"> |
| <div class="float">FLT</div> |
| <span class="label">START</span> |
| <span class="abspos">ABS</span> |
| <span class="relpos">REL</span> |
| <div class="overflow">OVERFLOW</div> |
| </div> |
| </div> |
| </div> |
| <div class="wrapper"> |
| <div class="test"> |
| <div class="float">FLT</div> |
| <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div> |
| <div class="in-flow"> |
| <div class="float">FLT</div> |
| <span class="label">CENTER</span> |
| <span class="abspos">ABS</span> |
| <span class="relpos">REL</span> |
| <div class="overflow">OVERFLOW</div> |
| </div> |
| </div> |
| </div> |
| <div class="wrapper"> |
| <div class="test"> |
| <div class="float">FLT</div> |
| <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div> |
| <div class="in-flow"> |
| <div class="float">FLT</div> |
| <span class="label">END</span> |
| <span class="abspos">ABS</span> |
| <span class="relpos">REL</span> |
| <div class="overflow">OVERFLOW</div> |
| </div> |
| </div> |
| </div> |
| <div class="wrapper"> |
| <div class="test"> |
| <div class="float">FLT</div> |
| <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div> |
| <div class="in-flow"> |
| <div class="float">FLT</div> |
| <span class="label">BASELINE</span> |
| <span class="abspos">ABS</span> |
| <span class="relpos">REL</span> |
| <div class="overflow">OVERFLOW</div> |
| </div> |
| </div> |
| </div> |
| <div class="wrapper"> |
| <div class="test"> |
| <div class="float">FLT</div> |
| <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div> |
| <div class="in-flow"> |
| <div class="float">FLT</div> |
| <span class="label">LAST BASELINE</span> |
| <span class="abspos">ABS</span> |
| <span class="relpos">REL</span> |
| <div class="overflow">OVERFLOW</div> |
| </div> |
| </div> |
| </div> |
| <div class="wrapper"> |
| <div class="test"> |
| <div class="float">FLT</div> |
| <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div> |
| <div class="in-flow"> |
| <div class="float">FLT</div> |
| <span class="label">FLEX-START</span> |
| <span class="abspos">ABS</span> |
| <span class="relpos">REL</span> |
| <div class="overflow">OVERFLOW</div> |
| </div> |
| </div> |
| </div> |
| <div class="wrapper"> |
| <div class="test"> |
| <div class="float">FLT</div> |
| <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div> |
| <div class="in-flow"> |
| <div class="float">FLT</div> |
| <span class="label">FLEX-END</span> |
| <span class="abspos">ABS</span> |
| <span class="relpos">REL</span> |
| <div class="overflow">OVERFLOW</div> |
| </div> |
| </div> |
| </div> |
| <div class="wrapper"> |
| <div class="test"> |
| <div class="float">FLT</div> |
| <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div> |
| <div class="in-flow"> |
| <div class="float">FLT</div> |
| <span class="label">UNSAFE START</span> |
| <span class="abspos">ABS</span> |
| <span class="relpos">REL</span> |
| <div class="overflow">OVERFLOW</div> |
| </div> |
| </div> |
| </div> |
| <div class="wrapper"> |
| <div class="test"> |
| <div class="float" style="margin-top: -1em">FLT</div> |
| <div style="padding-top: 0.5em; margin-bottom: -1.5em"></div> |
| <div class="in-flow"> |
| <div class="float">FLT</div> |
| <span class="label">UNSAFE CENTER</span> |
| <span class="abspos">ABS</span> |
| <span class="relpos">REL</span> |
| <div class="overflow">OVERFLOW</div> |
| </div> |
| </div> |
| </div> |
| <div class="wrapper"> |
| <div class="test"> |
| <div style="padding-top: 0.5em; margin-bottom: -2.5em"></div> |
| <div class="in-flow"> |
| <div class="float" style="margin-top: -1em">FLT</div> |
| <div class="float">FLT</div> |
| <span class="label">UNSAFE END</span> |
| <span class="abspos">ABS</span> |
| <span class="relpos">REL</span> |
| <div class="overflow">OVERFLOW</div> |
| </div> |
| </div> |
| </div> |
| <div class="wrapper"> |
| <div class="test"> |
| <div class="float">FLT</div> |
| <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div> |
| <div class="in-flow"> |
| <div class="float">FLT</div> |
| <span class="label">SAFE START</span> |
| <span class="abspos">ABS</span> |
| <span class="relpos">REL</span> |
| <div class="overflow">OVERFLOW</div> |
| </div> |
| </div> |
| </div> |
| <div class="wrapper"> |
| <div class="test"> |
| <div class="float">FLT</div> |
| <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div> |
| <div class="in-flow"> |
| <div class="float">FLT</div> |
| <span class="label">SAFE CENTER</span> |
| <span class="abspos">ABS</span> |
| <span class="relpos">REL</span> |
| <div class="overflow">OVERFLOW</div> |
| </div> |
| </div> |
| </div> |
| <div class="wrapper"> |
| <div class="test"> |
| <div class="float">FLT</div> |
| <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div> |
| <div class="in-flow"> |
| <div class="float">FLT</div> |
| <span class="label">SAFE END</span> |
| <span class="abspos">ABS</span> |
| <span class="relpos">REL</span> |
| <div class="overflow">OVERFLOW</div> |
| </div> |
| </div> |
| </div> |
| <div class="wrapper"> |
| <div class="test"> |
| <div class="float">FLT</div> |
| <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div> |
| <div class="in-flow"> |
| <div class="float">FLT</div> |
| <span class="label">SPACE-EVENLY</span> |
| <span class="abspos">ABS</span> |
| <span class="relpos">REL</span> |
| <div class="overflow">OVERFLOW</div> |
| </div> |
| </div> |
| </div> |
| <div class="wrapper"> |
| <div class="test"> |
| <div class="float">FLT</div> |
| <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div> |
| <div class="in-flow"> |
| <div class="float">FLT</div> |
| <span class="label">SPACE-BETWEEN</span> |
| <span class="abspos">ABS</span> |
| <span class="relpos">REL</span> |
| <div class="overflow">OVERFLOW</div> |
| </div> |
| </div> |
| </div> |
| <div class="wrapper"> |
| <div class="test"> |
| <div class="float">FLT</div> |
| <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div> |
| <div class="in-flow"> |
| <div class="float">FLT</div> |
| <span class="label">SPACE-AROUND</span> |
| <span class="abspos">ABS</span> |
| <span class="relpos">REL</span> |
| <div class="overflow">OVERFLOW</div> |
| </div> |
| </div> |
| </div> |
| <div class="wrapper"> |
| <div class="test"> |
| <div class="float">FLT</div> |
| <div></div> |
| <div class="in-flow"> |
| <div class="float">FLT</div> |
| <span class="label">NORMAL</span> |
| <span class="abspos">ABS</span> |
| <span class="relpos">REL</span> |
| <div class="overflow">OVERFLOW</div> |
| </div> |
| </div> |
| </div> |
| |
| <p> |
| <button onclick="document.querySelector('style[title]').textContent = 'html { font-size: 12px; }'">Show Text</button> |