- From: Oriol Brufau via GitHub <sysbot+gh@w3.org>
- Date: Fri, 28 Jun 2019 01:42:33 +0000
- To: public-css-archive@w3.org
``` |<----------PAGE WIDTH------------------->| | : : | |< MARGIN >:< CONTENT BOX >:<MARGIN>| | : TEXT HERE... : | | +-------+ ...TEXT HERE: | | | INNER +-------------| | | | LEFT | INNER | | | | FLOAT | CONTENT BOX| | | +-------+ | | | : | | | | : +-------------+ | | : : | ``` ``` |<----------PAGE WIDTH------------------->| | : : | |< MARGIN >:< CONTENT BOX >:<MARGIN>| | : TEXT HERE... : | | +-------+ ...TEXT HERE: | | | INNER | | | | | LEFT | cleared | | | | FLOAT | | | | +-------+-------------+ | | | INNER CONTENT BOX | | | +---------------------+ | | : : | ``` @verdy-p IMO that seems perfectly doable with a BFC root. [Example](https://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%0A%3Cstyle%3E%0A%40keyframes%20width%20%7B%0A%20%20from%20%7B%20width%3A%2075%25%20%7D%0A%20%20to%20%7B%20width%3A%20300px%20%7D%0A%7D%0Asection%20%7B%0A%20%20display%3A%20flow-root%3B%0A%20%20width%3A%2075%25%3B%0A%20%20margin%3A%200%20auto%3B%0A%20%20animation%3A%205s%20width%20infinite%20alternate%3B%0A%20%20background%3A%20yellow%3B%0A%7D%0Aaside%20%7B%0A%20%20float%3A%20left%3B%0A%20%20margin-right%3A%202em%3B%0A%20%20background%3A%20magenta%3B%0A%20%20height%3A%205em%3B%0A%7D%0Amain%20%7B%0A%20%20display%3A%20flow-root%3B%0A%20%20min-width%3A%20300px%3B%0A%20%20background%3A%20cyan%3B%0A%7D%0Ap%20%7B%0A%20%20margin%3A%200%3B%0A%7D%0A%3C%2Fstyle%3E%0A%3Csection%3E%0A%20%20%3Cp%3ETEXT%20HERE...%3C%2Fp%3E%0A%20%20%3Caside%3EINNER%20LEFT%20FLOAT%3C%2Faside%3E%0A%20%20%3Cp%3E...TEXT%20HERE%3C%2Fp%3E%0A%20%20%3Cmain%3EINNER%20CONTENT%20BOX%3C%2Fmain%3E%0A%3C%2Fsection%3E) Instead of your `margin: 2em+0.5em`, just use a BFC root to avoid overlapping the float, then you don't need the `2em`. And if you want extra margin when there is a float, set it as a `margin-right: 0.5em` to the float. -- GitHub Notification of comment by Loirooriol Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4052#issuecomment-506568842 using your GitHub account
Received on Friday, 28 June 2019 01:42:34 UTC